/* ========== 全局基础 ========== */

a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}

/* ========== 全局基础 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 给普通文字设置 微软雅黑 */
body,
button,
input,
textarea,
div,
p,
h1,h2,h3,h4,h5,h6,
span,
li,
a {
    font-family: "Microsoft YaHei","微软雅黑",sans-serif !important;
}

/* 强制修复 FontAwesome 图标字体（所有版本通用） */
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
.fa-solid,
.fa-regular,
.fa-brands,
[class*="fa-"],
i[class*="fa-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-family: "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}
body {
    margin: 0;
    padding: 0;
    background-color: #fff;
        margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

/* ========== 顶部LOGO ========== */
.ding {
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #FFFFFF;
    background-color: #BB7657;
    text-align: center;
    font-size: 14px;
}
.huangse14 {
    font-weight: normal;
    color:  #BB7657;
    font-size: 16px;
    font-weight: bold;
}




/* ========== 顶部LOGO 结束========== */



















/* ========== 顶部通知条 ========== */
.ding {
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #FFFFFF;
    background-color: #BB7657;
    text-align: center;
    font-size: 14px;
}

/* ========== 顶部LOGO栏 ========== */
.logo {
    width: 100%;
    margin: 0 auto;
    height: 80px;
    line-height: 80px;
    color: #000000;
    text-align: center;
    font-size: 16px;  
    overflow: hidden;
}

.logo li:nth-child(1) {
    width: 25%;
    text-align: left;
    padding-left: 10%;
}
.logo li:nth-child(2) {
    width: 50%;
    font-size: 32px;
    font-weight: bold;
}
.logo li:nth-child(3) {
    width: 25%;
    text-align: right;
    padding-right: 10%;
}






.logo li {
    color: #000000;
    list-style: none;
    list-style: none;
    float: left;
    height: 100%;
}

/* 默认状态：图标黑色 */
.logo li:last-child i {
    color: #000000;
}

/* 悬停状态：变色 */
.logo li:last-child a:hover i {
    color: #B97556;
}
.huangse14 {
    font-weight: normal;
    color: #BB7657;
    font-size: 16px;
    font-weight: bold;
}

/* ========== 导航菜单 ========== */
.menu {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 99;
}
.navbar {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    height: 80px;
    padding: 0;
    width: 1000px;
    background-color: #fff;
}
.nav-item {
    position: relative;
    margin: 0 25px;
    cursor: pointer;
    display: inline-block;
}
.nav-text {
    font-size: 20px;
    color: #333;
    text-decoration: none;
    display: inline-block;
    padding-bottom: 8px;
    transition: all 0.2s ease;
    position: relative;
}

.nav-text-xhx {/* 下划线*/
    font-size: 20px;
    color: #000000;
    
    font-weight: bold;
    display: inline-block;
    padding-bottom: 8px;
    
  
   
    border-bottom: 3px solid #003399;
}

.nav-item.active .nav-text {
    font-weight: bold;
}

/* 修复下划线 - 直接附加到.nav-text上，宽度100%就是文字宽度 */
.nav-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #003399;
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    transform-origin: center;
}

.nav-item.active .nav-text::after,
.nav-item:hover .nav-text::after {
    transform: scaleX(1);
}

.nav-item:hover .nav-text {
    font-weight: bold;
}

/* 确保所有全屏菜单不影响下划线 */
.nav-item.moment-item .nav-text::after,
.nav-item.news-item .nav-text::after,
.nav-item.bnd-item .nav-text::after,
.nav-item.liangti-item .nav-text::after,
.nav-item.service-item .nav-text::after {
    left: 0;
    width: 100%;
}

/* ========== 所有全屏下拉菜单 ========== */
.nav-item.moment-item,
.nav-item.news-item,
.nav-item.bnd-item,
.nav-item.liangti-item,
.nav-item.service-item {
    position: static !important;
}

.nav-item.moment-item .dropdown,
.nav-item.news-item .dropdown,
.nav-item.bnd-item .dropdown,
.nav-item.liangti-item .dropdown,
.nav-item.service-item .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform: none;
    margin-top: 0px;
    background: #F4F0E7;
    width: 100%;
    min-width: 100%;
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.55s cubic-bezier(0.25,0.1,0.1,1);
    z-index: 99999;
    overflow: hidden;
}

.nav-item.moment-item:hover .dropdown,
.nav-item.news-item:hover .dropdown,
.nav-item.bnd-item:hover .dropdown,
.nav-item.liangti-item:hover .dropdown,
.nav-item.service-item:hover .dropdown {
    height: 650px;
    opacity: 1;
    visibility: visible;
}

/* 下拉内容布局 - 通用样式 */
.menu-wrap {
    width: 1200px;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 60px;
    padding: 40px 0 30px 0;
}

/* ========== 服务菜单三列布局专用样式 ========== */
.service-menu-wrap {
    width: 1300px;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 40px 0 30px 0;
}

/* 第一列和第二列样式 */
.service-col {
    width: 220px;
    flex-shrink: 0;
}

.service-col-title {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 3px solid #c98b65;
    display: inline-block;
}

.service-col-list {
    list-style: none;
}

.service-col-item {
    font-size: 15px;
    color: #000000;
    margin: 15px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    text-decoration: none;
    font-weight: normal;/*服务字 */
}

.service-col-item:hover {
    color: #c98b65 !important;
    transform: translateX(8px) scale(1.02);
    font-weight: bold;
}


.menu-item-xhx2 {
    font-size: 15px;
    color: #BA7656;
    margin: 15px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    text-decoration: none;
    font-weight: normal;/*服务字 */
}

.menu-item-xhx2:hover {
    color: #c98b65 !important;
    transform: translateX(8px) scale(1.02);
    font-weight: bold;
}

/* 第三列图片区域 - 图片稍微小一点 */
.service-image-col {
    flex: 1;
    display: flex;
    gap: 0px;
    height: 400px;
}

.service-card {
    flex: 1;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateY(0px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    display: block;
}

/* 第一个卡片：左边圆角 */
.service-card:first-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

/* 最后一个卡片：右边圆角 */
.service-card:last-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* 中间卡片无圆角 */
.service-card:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.25,0.1,0.1,1);
  
}

.service-card:hover img {
    transform: scale(1.08);
}

.service-card-text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    color: #fff;
    padding: 6px 12px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: none;
    pointer-events: none;
}

.service-card:hover .service-card-text {
    background: #BB7657;
    color: #fff;
    border-color: #BB7657;
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 鼠标悬停时，图片从底部上来 */
.nav-item.service-item:hover .service-card {
    opacity: 1;
    transform: translateY(0);
}

.service-card:nth-child(1) { transition-delay: 0s; }
.service-card:nth-child(2) { transition-delay: 0.3s; }
.service-card:nth-child(3) { transition-delay: 0.6s; }

/* 左侧菜单样式（其他菜单用） */
.menu-left {
    width: 180px;
    text-align: left;
    flex-shrink: 0;
}
.menu-title {
    font-size: 20px;
    color: #000;
    margin-bottom: 30px;
    font-weight: bold;
}
.menu-list {
    list-style: none;
}
.menu-item {
    font-size: 15px;
    color: #333;
    margin: 20px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    width: 100%;
    font-weight:normal;
}

.menu-item-xhx {
    font-size: 15px;
    color: #BB7657;
    font-weight: bold;
    margin: 20px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    width: 100%;
    font-weight:normal;
}

/* 左侧菜单悬停效果 */
.menu-item:hover {
    color: #BB7657 !important;
    transform: translateX(10px) scale(1.05);
    font-weight: bold;
}

/* 右侧图片卡片 - 无缝连接 */
.menu-right {
    display: flex;
    gap: 0;
    flex: 1;
    height: 450px;
    overflow: hidden;
    border-radius: 0;
}

.card {
    flex: 1;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateY(80px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    display: block;
}

.card:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.card:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.card:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.card:nth-child(1) { transition-delay: 0s; }
.card:nth-child(2) { transition-delay: 0.3s; }
.card:nth-child(3) { transition-delay: 0.6s; }
.card:nth-child(4) { transition-delay: 0.9s; }
.card:nth-child(5) { transition-delay: 1.2s; }

.nav-item.moment-item:hover .card,
.nav-item.news-item:hover .card,
.nav-item.bnd-item:hover .card,
.nav-item.liangti-item:hover .card {
    opacity: 1;
    transform: translateY(0);
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.25,0.1,0.1,1);
    display: block;
}

.card:hover img {
    transform: scale(1.1);
}

.card-text {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    color: #fff;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: none;
    pointer-events: none;
}

.card:hover .card-text {
    background: #BB7657;
    color: #fff;
    border-color: #BB7657;
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ========== 下拉菜单底部区域 - 共用 ========== */
.dropdown-footer {
    width: 1300px;
    margin: 0 auto;
    padding: 0 0 30px 0;
}

/* 分割线 - 1像素高 */
.footer-divider {
    width: 100%;
    height: 1px;
    background-color: #000000;
    margin-bottom: 30px;
}

/* 底部按钮组 - 靠左对齐 */
.footer-buttons {
    display: flex;
    gap: 40px;
    justify-content: flex-start;
    align-items: center;
}

.footer-btn1 {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    background: transparent;
    border: none;
    font-family: sans-serif;
    padding: 5px 0;
     font-weight:normal;
}

.footer-btn1:hover {
    color: #BB7657;
    transform: translateY(-2px) scale(1.05);
}

.footer-btn1::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #BB7657;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.footer-btn1:hover::after {
    transform: scaleX(1);
}


/* ========== 全屏搜索弹窗 固定高度678px ========== */

.search-icon {
    font-size: 18px;
    color: #333;
    margin-left:-15px;
    margin-top:-5px;
    cursor: pointer;
    /* 关键：缓冲过渡 */
    transition: all 0.3s ease;
    display: inline-block;
}
.search-icon:hover {
    /* 右移3px + 轻微放大 */
    transform: translateX(3px) scale(1.08);
    color: #BB7657;
}


.search-overlay {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 740px;
    background: #fff;
    z-index: 999999;
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    border-top:1px solid #eee;
}
.search-overlay.open {
    transform: translateY(0);
}
.search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 5%;
    border-bottom: 1px solid #ccc;
}
.search-input-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 1000px;
}
.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 20px;
    padding: 10px 0;
}
.search-close-btn {
    font-size: 28px;
    cursor: pointer;
    color: #333;
    line-height: 1;
}
.search-content {
    display: flex;
    width: 1200px;
    margin: 40px auto 0 auto;
    gap: 50px;
}
/* 每列左侧1px竖线 高300px */
.search-col {
    flex: 1;
    padding-left:30px;
    border-left:1px solid #999;
    height:300px;
}
.search-col-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
    font-weight: bold;
}
.search-col-list {
    list-style: none;
}
.search-col-item {
    font-size: 18px;
    color: #333;
    margin: 15px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}
.search-col-item:hover {
    color: #BB7657;
    transform: translateX(8px);
}


















/* ========== 轮播样式 ========== */
.slider {
    width: 100%;
    position: relative;
    
}
.slider::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 49%; /* 控制图片比例，数值越大越高，你可以微调 40%~50% */
}
.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s;
    pointer-events: none;
}
.slide.active {
    opacity: 1;
    pointer-events: auto;
}
.slide .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
}
.slide .cn {
    font-size: 24px;
    margin-bottom: 10px;
}
.slide .en {
    font-size: 18px;
    margin-bottom: 30px;
}
.slide-btn {
    padding: 12px 35px;
    background: transparent;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 30px;
    transition: all 0.4s ease;
    display: inline-block;
}
.slide-btn:hover {
    background-color: #BB7657;
    color: #fff;
    border-color: #BB7657;
    transform: scale(1.08);
}
.dots {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.dot {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
}
.dot.active {
    background: #fff;
}

/* ========== 轮播样式结束 ========== */



/* ========== 品牌介绍动画区块 ========== */
.intro-section {
    background-color: #F4F0E7;
    padding: 80px 20px;
    text-align: center;
}
.intro-logo {
    margin-bottom: 40px;
}
.intro-logo img {
    height: 80px;
}
.intro-title {
    font-size: 32px;
    color: #1a3b70;
    margin-bottom: 40px;
    font-weight:bold;
}
.intro-text {
    max-width: 1200px;
    margin: 0 auto;
    line-height: 2.2;
    font-size: 16px;
    color: #222;
    font-weight: normal;
}
.intro-line {
    opacity: 0;
    transform: translateY(50px); /* 初始从下方上来 */
    transition: all 0.8s ease;
}
.intro-line.active {
    opacity: 1;
    transform: translateY(0); /* 向上滑 → 显示 */
}
.intro-line.hide {
    opacity: 0;
    transform: translateY(50px); /* 向下滑 → 隐藏（回到下方） */
}
/* ========== 品牌介绍动画结束 ========== */


/* ========== 经典-尊享-珍藏产品系列 手风琴选项卡 ========== */
.product-section {
    background-color: #F4F0E7;
    padding: 5px 0;
    text-align: center;
}
.tab-bar {
    display: flex;
    justify-content: center;
    gap: 70px;
    margin-bottom: 25px;
}
.tab-item {
    font-size: 20px;
    color: #333;
    cursor: pointer;
    position: relative;
}
.tab-item::after {
    content: "";
    width: 100%;
    height: 3px;
    background: #c98b65;
    position: absolute;
    bottom: -10px;
    left: 0;
    transform: scaleX(0);
    transition: 0.3s;
    
}
.tab-item.active::after {
    transform: scaleX(1);
    
}
.price-display {
    font-size: 22px;
    font-weight: bold;
    color: #1a3b70;
    white-space: nowrap;
    z-index: 10;
    /* 关键：只过渡 transform 和 opacity，不过渡 left/top */
    transition: transform 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 4.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.price-display.show {
    transform: translateY(0) !important;
    opacity: 1 !important;
    
}
.accordion-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    height: 600px;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
}
.accordion-item {
    height: 100%;
    width: 260px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}
.accordion-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.5s ease;
}
/* 展开完毕延迟1.2秒开始放大 */
.accordion-item.active img,
.accordion-box:hover .accordion-item:hover img {
    transition-delay: 0.4s;
    transform: scale(1.1);
}
/* 收回无延迟 */
.accordion-item:not(.active) img,
.accordion-box:hover .accordion-item:not(:hover) img {
    transition-delay: 0s;
    transform: scale(1);
}

/* 文字按钮初始隐藏 */
.accordion-item .info {
    position: absolute;
    bottom: 135px;
    left: 50%;
    transform: translate(-50%, 100px);
    color: #fff;
    text-align: center;
    opacity: 0;
    transition: all 4.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    white-space: nowrap;
    visibility: hidden;
}
.accordion-item .explore-btn {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translate(-50%, 80px);
    padding: 10px 30px;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 30px;
    font-size: 15px;
    text-decoration: none;
    opacity: 0;
    transition: all 4.8s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    white-space: nowrap;
    visibility: hidden;
}
.accordion-item .explore-btn:hover {
    background-color: #BB7657;
    color: #fff;
    border-color: #BB7657;
}

/* 默认中间图展开 */
.accordion-item.active {
    width: 460px;
}
/* 放大开始同时弹出文字，延迟和图片放大一致1.2秒 */
.accordion-item.active .info,
.accordion-item.active .explore-btn {
    transition-delay: 0.1s;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* 鼠标进区域隐藏中间图文 */
.accordion-box:hover .accordion-item.active .info,
.accordion-box:hover .accordion-item.active .explore-btn {
    transition-delay: 0s;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 100px);
}

/* 鼠标离开恢复 */
.accordion-box:not(:hover) .accordion-item.active .info,
.accordion-box:not(:hover) .accordion-item.active .explore-btn {
    transition-delay: 0.6s;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* 悬浮布局 */
.accordion-box:hover .accordion-item {
    width: 260px;
}
.accordion-box:hover .accordion-item:hover {
    width: 460px;
}
/* 悬浮图片：放大同时出文字 */
.accordion-box:hover .accordion-item:hover .info,
.accordion-box:hover .accordion-item:hover .explore-btn {
    transition-delay: 0.6s;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
/* 其他图隐藏 */
.accordion-box:hover .accordion-item:not(:hover) .info,
.accordion-box:hover .accordion-item:not(:hover) .explore-btn {
    transition-delay: 0s;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 100px);
}
/* ========== 经典-尊享-珍藏产品系列 手风琴选项结束 ========== */








/* ========== 服务板块 ========== */
.server
{
  width: 100%;
  margin: 0 auto;
  background: #F4F0E7;   
  height: 800px;
}
.server-section {
  margin: 0 auto;
  background: #F4F0E7;
  padding: 50px 0;
}
.server-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}
.server-card {
  width: 360px;
  height: 280px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.server-card.wide {
  width: 740px;
  height: 280px;
}
.server-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.7s ease;
}
.server-card:hover img {
  transform: scale(1.12);
}
.server-text {
  position: absolute;
  left: 30px;
  bottom: 35px;
}
.server-big {
  font-size: 24px;
  font-weight: bold;
  color: #FFFFFF;
  margin-bottom: 6px;
  width: 120px;
  text-align: center;
  transition: all 1.7s ease;
}
.server-small {
  font-size: 16px;
  width: 120px;
  color: #FFFFFF;
  text-align: center;
  transition: all 1.7s ease;
}
/* 只改背景色，文字大小不动 */
.server-card:hover .server-big {

  color: #c98b65;
  width: 120px;
  border-radius: 5px;
  text-align: center;
}
.server-card:hover .server-small {

  color: #c98b65;
  width: 120px;
  border-radius: 5px;
  text-align: center;
}
/* ========== 服务板块结束 ========== */



/* ========== 用户心声 ========== */
.user-review {
  width: 100%;
  background: #F4F0E7;
  padding: 50px 0;
  position: relative;
}
.review-main {
  width: 1300px;
  margin: 0 auto;
  overflow: hidden;
}
.review-group {
  display: flex;
  transition: transform 0.5s ease;
  width: fit-content;
}
.review-card {
  width: 630px;
  height: 240px;
  background: #fff;
  border-radius: 20px;
  padding: 35px 40px;
  margin: 0 10px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  gap: 20px;
}
.review-quote {
  flex-shrink: 0;
  font-size: 60px;
  color: #c9d8f0;
  line-height: 1;
  margin-top: 10px;
}
.review-content-wrap {
  flex: 1;
}
.review-content {
  font-size: 16px;
  color: #444;
  font-weight: normal;
  line-height: 1.8;
  margin-bottom: 25px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-user {
  display: flex;
  align-items: center;
  gap: 18px;
}
.review-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #BB7657;
}
.review-name {
  font-size: 22px;
  color: #1a3b70;
  font-weight: bold;
}
.review-arrow {
  position: absolute;
  right: calc((100% - 1300px)/2 + 50px);
  bottom: 80px;
  display: flex;
  gap: 12px;
}
.arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #999;
  background: transparent;
  font-size: 24px;
  font-weight: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
 
}
.arrow:hover {
  background: #c98b65;
  color: #fff;
  border-color: #c98b65;
}



/* 鼠标悬浮卡片效果 */
.review-card {
    cursor: pointer; /* 鼠标变手型 */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.review-card:hover {
  background-color: #c98b65;
}

/* 悬浮时内容整体放大 */
.review-card:hover .review-content-wrap {
  transform: scale(1.04);
  transition: transform 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 悬浮时文字变白 */
.review-card:hover .review-content,
.review-card:hover .review-name {
  color: #fff !important;
}

/* 悬浮时头像放大 */
.review-card:hover .review-avatar {
  transform: scale(1.08);
  transition: transform 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ========== 用户心声结束 ========== */


/* ========== 门店信息 ========== */
.store-section {
  width: 100%;
  display: flex;
  height: 500px;
}
.store-left {
  width: 50%;
  background: url('/images/ditu.jpg') center center / cover no-repeat;
}
.store-right {
  width: 50%;
  background: #BA7656;
  color: #fff;
  padding: 80px 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.store-title {
  font-size: 28px;
  margin-bottom: 30px;
  font-weight: normal;
}
.store-address,
.store-tel {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 15px;
  font-weight: normal;
}
.store-tel {
  display: flex;
  align-items: center;
  gap: 10px;
}
.store-tel i {
  font-size: 24px;
}
.store-link {
  margin-top: 40px;
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.store-link i {
  font-size: 24px;
}
/* ========== 门店信息结束 ========== */


/* ========== 底部页眉 ========== */
.footer-section {
  width: 100%;
  background: #f3eee3;
  padding: 50px 0;
}
.footer-wrap {
  width: 1121px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.footer-left {
  display: flex;
  gap: 40px;
}
.footer-col {
  width: 230px;
}
.footer-col h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 16px 0;
  line-height: 2.2;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 2.4;
}
.footer-col li a {
  color: #333;
  text-decoration: none;
  /* 加过渡：平滑缓冲 */
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-col li a:hover {
      font-size: 14px;
      font-weight: normal;
  color: #BB7657 !important;
  font-weight: bold;
  /* 往右移动 3px */
  transform: translateX(5px);
}
.footer-right {
  width: 280px;
  margin-top:73px;
}
.right-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 16px 0;
  line-height: 1.2;
}
.footer-btn {
    background: #002663;
    color: #fff;
    border: none;
    padding: 7px 18px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 3px;
    margin-bottom: 50px;
    transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
    text-align: center;
}

/* 悬停效果（PC端） */
.footer-btn:hover {
    background: #c98b65;
    color: #fff;
   transform: translateX(5px);
}



.follow-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 16px 0;
  line-height: 1.2;
}
.footer-qrcode-wrap {
  display: flex;
  gap: 25px;
}
.footer-qrcode {
  text-align: left;
}
.footer-qrcode img {
  width: 95px;
  height: 95px;
  display: block;
  margin-bottom: 8px;
}
.code-btn {
  background: #002663;
  color: #fff;
  border: none;
  padding: 4px 10px;
  width: 95px;
  font-size: 12px;
  border-radius: 3px;
}
/* ========== 底部页眉结束 ========== */








/* 返回顶部按钮 */
/* 返回顶部按钮 */
.back-to-top {
    position: fixed;
    bottom: 50px;
    right: 40px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #bb7657 0%, #8b4e33 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}
/* 箭头样式 */
.back-to-top i {
    color: #fff;
    font-size: 22px;
    transition: transform 0.3s ease;
}
/* 鼠标悬浮：箭头向上动画 + 渐变加深 */
.back-to-top:hover i {
    transform: translateY(-6px);
}
.back-to-top:hover {
    background: linear-gradient(135deg, #9e5e42 0%, #6e3a21 100%);
}






/*注册*/
        .member-section {
            width: 100%;
            height: 600px;
            background: url('<?=$zp?>') center center / cover no-repeat;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            overflow: hidden;
        }
        .member-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.4);
        }
        .member-container {
            width: 1200px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        .member-left {width: 60%;}
        .member-title {
            font-size: 28px;
            text-align: center;
            margin-bottom: 15px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeUp 0.8s ease forwards;
        }
        .member-subtitle {
            font-size: 18px;
            text-align: center;
            margin-bottom: 40px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeUp 0.8s ease 0.2s forwards;
        }
        .privilege-box {
            width: 80%;
            margin: 0 auto;
            padding: 30px;
            position: relative;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeUp 0.8s ease 0.4s forwards;
        }
        .privilege-box::before,.privilege-box::after,.privilege-box .line-top,.privilege-box .line-right {
            content: '';position: absolute;background: #fff;transition: all 1s ease;
        }
        .privilege-box::before {top:0;left:0;width:0;height:1px;animation: drawLeft 1s ease 0.6s forwards;}
        .privilege-box::after {top:0;right:0;width:1px;height:0;animation: drawTop 1s ease 1.6s forwards;}
        .privilege-box .line-top {bottom:0;right:0;width:0;height:1px;animation: drawRight 1s ease 2.6s forwards;}
        .privilege-box .line-right {bottom:0;left:0;width:1px;height:0;animation: drawBottom 1s ease 3.6s forwards;}
        .privilege-title {
            text-align: center;
            font-size: 20px;
            margin-bottom: 30px;
        }
        .privilege-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        .privilege-item {
            text-align: center;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeUp 0.8s ease forwards;
        }
        .privilege-item:nth-child(1){animation-delay:0.6s;}
        .privilege-item:nth-child(2){animation-delay:0.8s;}
        .privilege-item:nth-child(3){animation-delay:1.0s;}
        .privilege-item:nth-child(4){animation-delay:1.2s;}
        .privilege-item i {
            font-size: 24px;
            margin-bottom: 10px;
            transition: color 0.3s ease;
        }
        .privilege-item:hover i {color: #B97556;}
        .privilege-name {font-size: 18px;margin-bottom: 8px;}
        .privilege-desc {font-size: 14px;color: #ddd;}

        .member-right {
            width: 30%;
            background: #fff;
            color: #333;
            padding: 40px 30px;
            text-align: center;
            border-radius: 4px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeUp 0.8s ease 0.6s forwards;
        }
        .right-title {font-size: 18px;margin-bottom: 30px;font-weight: bold;}
        .qrcode-img {
            width: 180px;height: 180px;margin: 0 auto 20px;
            display: block;border:1px solid #eee;border-radius:8px;
        }
        .right-desc {font-size:14px;color:#666;margin-bottom:20px;}
        .register-mode {display:flex;justify-content:center;gap:20px;}
        .mode-btn {
            display:flex;align-items:center;gap:8px;
            padding:8px 16px;border:1px solid #ddd;border-radius:4px;
            text-align: center;
            text-decoration:none;color:#333;font-size:14px;transition:all 0.3s ease;
            cursor: pointer;
        }
        .mode-btn:hover {background:#B97556;color:#FFFFFF;}

        .register-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0,0,0,0.6);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
        }
        .register-box {
            width: 420px;
            background: #fff;
            padding: 35px;
            border-radius: 8px;
            position: relative;
        }
        .reg-title {font-size:20px;text-align:center;margin-bottom:25px;color:#333;}
        .reg-close {
            position:absolute;right:20px;top:15px;font-size:22px;
            color:#999;cursor:pointer;
        }
        .reg-item {margin-bottom:18px;}
        .reg-item input {
            width:100%;height:45px;padding:0 15px;border:1px solid #eee;
            border-radius:4px;font-size:14px;outline:none;
        }
        .code-row {display:flex;gap:10px;}
        .code-row input {flex:1;}
        .get-code {
            white-space:nowrap;padding:0 15px;height:45px;
            background:#B97556;color:#fff;border:none;border-radius:4px;
            cursor:pointer;
        }
        .get-code.disabled {background:#ccc;cursor:not-allowed;}
        .reg-submit {
            width:100%;height:48px;background:#B97556;
            color:#fff;border:none;border-radius:4px;font-size:16px;
            cursor:pointer;margin-top:10px;
        }
        @keyframes fadeUp {to{opacity:1;transform:translateY(0);}}
        @keyframes drawLeft {to{width:100%;}}
        @keyframes drawTop {to{height:100%;}}
        @keyframes drawRight {to{width:100%;}}
        @keyframes drawBottom {to{height:100%;}}