/* 设置页面的背景样式 */
.background {
    position: fixed; /* 背景固定定位，不随页面滚动 */
    top: 0; /* 背景位置设置在页面顶部 */
    left: 0; /* 背景位置设置在页面左侧 */
    width: 100%; /* 背景宽度为页面的 100% */
    height: 100%; /* 背景高度为页面的 100% */
    min-width: 1000px; /* 背景最小宽度设置为 1000px，确保在小屏幕上不会过小 */
    z-index: -10; /* 背景图层设置为最底层，防止覆盖其他内容 */
    zoom: 1; /* 用于解决某些浏览器的缩放问题 */

    background: url(/assets/luna/img/background.png) no-repeat; /* 设置背景图片且不重复显示 */
    background-size: cover; /* 背景图片自动适配容器大小 */
    -webkit-background-size: cover; /* 兼容 Webkit 浏览器 */
    -o-background-size: cover; /* 兼容 Opera 浏览器 */
    background-position: center 0; /* 背景图片水平居中，垂直方向顶部对齐 */
}

/* 禁用数字输入框默认的上下箭头按钮（Webkit 浏览器） */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none; /* 隐藏上下箭头 */
}

/* 禁用数字输入框默认样式（Firefox 浏览器） */
input[type="number"] {
    -moz-appearance: textfield; /* 设置为普通文本样式 */
}

/* 移除左边距的样式，使用默认值 */
.noML {
    margin-left: initial !important; /* 强制清除左边距 */
}

/* 隐藏元素 */
.hide {
    display: none; /* 设置元素不可见 */
}

/* 当前选中标签的下边框样式 */
.layui-tab-title .layui-this:after {
    border-radius: 5px 5px 0 0; /* 设置标签下边框为圆角样式 */
}

/* 当前选中标签的文字颜色 */
.layui-tab-title .layui-this {
    color: #737373; /* 设置字体颜色为灰色 */
}

/* 标签栏中未选中标签的文字颜色 */
.layui-tab-title li {
    color: #737373; /* 设置字体颜色为灰色 */
}



/*极验*/
.geetest_holder.geetest_wind {
    display: inline-block;
    vertical-align: middle;
}

.notSelection {
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 滚动条重置样式 */
::-webkit-scrollbar {
    width: 20px; /* 滚动条的宽度为20px */
    height: 20px; /* 滚动条的高度为20px（主要用于水平滚动条） */
    background-color:#fff; /* 滚动条的背景颜色为浅灰色 */
}

::-webkit-scrollbar-track {
    background-color: #fff; /* 滚动条轨道的背景颜色为白色 */
    border-radius: 10px; /* 滚动条轨道的圆角半径为10px */
}

::-webkit-scrollbar-thumb {
    /* border-radius: 10px; */ /* （可选）滚动条滑块的圆角半径为10px（此处被注释掉） */
    background-color: #FFBB00; /* 滚动条滑块的背景颜色为橙色色 */
}


/* 行布局样式 */
.layui-row {
    margin: 0 10px; /* 设置行左右外边距为 10px */
}

/* 头部容器样式 */
.header .header-box {
    padding-top: 15px; /* 设置头部容器顶部内边距为 150px */
}





/* 头部容器中的图片样式 */
.header .header-box img {
    max-width: 300px; /* 图片的最大宽度为 150px */
    max-height: 90px; /* 图片的最大高度为 45px */
}

/* 头部信息文本样式 */
.header .header-box .info {
    font-size: 24px; /* 字体大小设置为 16px */
    font-weight: 700; /* 字体加粗 */
    color: #FFFFFF; /* 设置字体颜色为灰色 */
    display: inline-block; /* 设置为行内块元素 */
    margin-left: 10px; /* 左侧外边距为 10px */
    vertical-align: middle; /* 垂直对齐中间 */
}

/* 查询按钮容器样式 */
.header .header-box .query {
    display: inline-block; /* 设置为行内块元素 */
    float: right; /* 右对齐浮动 */
}

/* 查询按钮样式 */
.header .header-box .query a {
   
    -webkit-user-select: none; /* 禁止用户在 Webkit 浏览器中选择文本 */
    -moz-user-select: none; /* 禁止用户在 Mozilla 浏览器中选择文本 */
    -ms-user-select: none; /* 禁止用户在 IE 浏览器中选择文本 */
    user-select: none; /* 禁止用户选择文本 */
 
}



/* 公告容器样式 */
.header .header-box .notice {
    margin-top: 20px; /* 顶部外边距为 20px */
    padding: 0 15px; /* 左右内边距为 15px */
}

/* 公告标题样式 */
.header .header-box .notice .tit {
    color: #FFFFFF; /* 设置字体颜色为灰色 */
    font-size: 14px; /* 字体大小为 14px */
    font-weight: 700; /* 字体加粗 */
}

/* 公告提示信息样式 */
.header .header-box .notice .tips {
    margin-top: 5px; /* 顶部外边距为 5px */
    color: #FFFFFF; /* 设置字体颜色为深灰色 */
    font-size: 12px; /* 字体大小为 12px */
    line-height: 1.5; /* 行高为 1.5 */
}


/* 主体内容容器样式 */
.main .main-box {
    margin-top: 40px; /* 顶部外边距为 20px */
background: transparent; /* 设置背景颜色为透明 */
  -webkit-box-shadow: 0 7px 29px 0 rgba(18, 52, 91, .11); /* 设置 Webkit 浏览器的阴影效果 */
    box-shadow: 0 7px 29px 0 rgba(18, 52, 91, .11); /* 设置容器的阴影效果 */
    border-radius: 12px; /* 圆角半径为 6px */
    padding-top: 14px; /* 顶部内边距为 14px */
    padding-bottom: 20px; /* 底部内边距为 20px */
}

/* 清除浮动的伪元素方法 */
.main-box:after {
    content: ""; /* 空内容用于清除浮动 */
    display: block; /* 设置为块级元素 */
    height: 0; /* 高度为 0 */
    clear: both; /* 清除前面的浮动 */
    visibility: hidden; /* 隐藏伪元素 */
}

/* 标题、分类和商品列表的通用外边距 */
.main .title, .main .cate, .main .goods {
    margin: 0 20px; /* 左右外边距为 20px */
}

/* 主标题样式 */
.main .title {
    font-size: 24px; /* 字体大小为 18px */
    font-weight: 600; /* 字体加粗 */
    color: #ff8800; /* 字体颜色为橙色 */
}


/* 分类部分样式 */
.main .cate {
    padding-top: 20px; /* 顶部内边距为 20px */
    margin: 0 10px; /* 左右外边距为 10px */
    font-size: 0; /* 清除子元素间的空白间隙 */
}

/* 分类卡片样式 */
.main .cate .cate-box {
    overflow: hidden; /* 超出部分隐藏 */
    display: inline-block; /* 行内块显示 */
    vertical-align: middle; /* 垂直对齐中间 */
    width: 300px; /* 固定宽度为 150px */
    height: 65px; /* 固定高度为 50px */
    background: #ffffff; /* 背景颜色为白色色 */
    border-radius: 50px; /* 圆角半径为 10px */
    padding: 0 10px; /* 左右内边距为 10px */
    margin: 0 10px; /* 左右外边距为 10px */
    cursor: pointer; /* 鼠标悬浮时显示为指针 */
    -webkit-user-select: none; /* 禁止 Webkit 浏览器的文本选择 */
    -moz-user-select: none; /* 禁止 Mozilla 浏览器的文本选择 */
    -ms-user-select: none; /* 禁止 IE 浏览器的文本选择 */
    user-select: none; /* 禁止用户选择文本 */
    position: relative; /* 定位为相对定位 */
    margin-bottom: 10px; /* 底部外边距为 10px */
    text-align: center; /* 文本居中 */
    line-height: 1.4; /* 行高，适合多行文本 */
    word-wrap: break-word; /* 自动换行 */
    white-space: normal; /* 允许换行 */
}


/* 选中分类卡片样式 */
.main .cate .cate-box-select {
    background-image: linear-gradient(135deg, #FF9A3C 10%, #FF6A00 100%); /* 渐变橙色背景 */
    -webkit-box-shadow: 0 7px 10px 0 rgba(255, 138, 61, .23); /* Webkit 浏览器的橙色阴影效果 */
    box-shadow: 0 7px 10px 0 rgba(255, 138, 61, .23); /* 设置橙色阴影效果 */
}


/* 分类卡片内的文字样式 */
.main .cate .cate-box p {
    font-weight: 400; /* 字体粗细为普通 */
    font-size: 16px; /* 字体大小为 12px */
    color: #ff8800; /* 字体颜色为橙色 */
    margin-top: 12px; /* 顶部外边距为 12px */
        font-weight: 600; /* 字体加粗 */
}

/* 选中分类卡片内文字样式 */
.main .cate .cate-box-select p {
    color: #fff; /* 字体颜色为白色 */
}

/* 商品列表样式 */
.main .goods {
    margin-top: 10px; /* 顶部外边距为 10px */
    border-top: 3px solid #ffffff; /* 顶部边框为 1px 浅灰色实线 */
    padding-top: 10px; /* 顶部内边距为 10px */
}


/* 商品卡片样式 */
.main .goods .goods-box {
    padding: 18px; /* 内边距为 18px */
    vertical-align: middle; /* 垂直对齐中间 */
    min-width: 185px; /* 最小宽度为 185px */
    min-height: 80px; /* 最小高度为 80px */
    background: #fff; /* 背景颜色为白色 */
    border: 2px solid #f1f4fb; /* 边框为浅灰色实线 */
    box-shadow: 0 4px 10px 0 rgba(135, 142, 154, .14); /* 设置阴影效果 */
    border-radius: 10px; /* 圆角半径为 10px */
    margin-right: 11px; /* 右侧外边距为 11px */
    margin-bottom: 10px; /* 底部外边距为 10px */
    cursor: pointer; /* 鼠标悬浮时显示为指针 */
    display: inline-flex; /* 行内弹性盒子布局 */
}

/* 商品图片容器样式 */
.main .goods .picture {
    vertical-align: top; /* 垂直对齐顶部 */
    margin-right: 10px; /* 右侧外边距为 10px */
    display: inline-block; /* 设置为行内块元素 */
    min-width: 80px; /* 最小宽度为 80px */
    width: 80px; /* 宽度为 80px */
    height: 80px; /* 高度为 80px */
}

/* 商品图片样式 */
.main .goods .picture img {
    width: 50%; /* 宽度为父容器的 100% */
    height: 50%; /* 高度为父容器的 100% */
    border-radius: 10px; /* 圆角半径为 10px */
    object-fit: cover; /* 图片自动适应容器并裁剪 */
}

/* 商品信息容器样式 */
.main .goods .msg {
    vertical-align: top; /* 垂直对齐顶部 */
    display: inline-block; /* 设置为行内块元素 */
}

/* 商品名称样式 */
.main .goods .msg .goods-name {
    margin-bottom: 10px; /* 底部外边距为 10px */
    color: #545454; /* 字体颜色为灰色 */
    font-size: 12px; /* 字体大小为 12px */
    font-weight: 400; /* 字体粗细为普通 */
    margin-top: 5px; /* 顶部外边距为 5px */
}

/* 商品价格容器样式 */
.main .goods .msg .goods-price {
    color: #3C8CE7; /* 字体颜色为蓝色 */
    font-size: 14px; /* 字体大小为 14px */
    font-weight: 700; /* 字体加粗 */
}

/* 商品价格中的额外文字样式 */
.main .goods .msg .goods-price span {
    font-size: 12px; /* 字体大小为 12px */
    vertical-align: bottom; /* 垂直对齐底部 */
}

/* 商品价格中的标签样式 */
.main .goods .msg .goods-price div {
    display: inline-block; /* 设置为行内块元素 */
    background: #ffebe8; /* 背景颜色为浅红色 */
    color: #fb636b; /* 字体颜色为红色 */
    padding: 1px 3px; /* 上下内边距为 1px，左右内边距为 3px */
    border-radius: 3px; /* 圆角半径为 3px */
    font-size: 12px; /* 字体大小为 12px */
    margin-right: 5px; /* 右侧外边距为 5px */
}

/* 商品数量容器样式 */
.main .goods .msg .goods-num {
    margin-top: 3px; /* 顶部外边距为 3px */
}

/* 商品数量的进度条容器样式 */
.main .goods .msg .goods-num div {
    display: inline-block; /* 设置为行内块元素 */
    width: 53px; /* 宽度为 53px */
    height: 5px; /* 高度为 5px */
    background: #f3f3f3; /* 背景颜色为浅灰色 */
    position: relative; /* 设置为相对定位 */
    border-radius: 3px; /* 圆角半径为 3px */
}

/* 商品数量的进度条样式 */
.main .goods .msg .goods-num div p {
    display: inline-block; /* 设置为行内块元素 */
    position: absolute; /* 设置为绝对定位 */
    width: 40%; /* 宽度为父元素的 40% */
    height: 100%; /* 高度为父元素的 100% */
    background: linear-gradient(55deg, #65d69e, #31dd92); /* 渐变背景，从浅绿到深绿 */
    border-radius: 3px; /* 圆角半径为 3px */
}

/* 商品数量的文字提示样式 */
.main .goods .msg .goods-num span {
    color: #0db26a; /* 字体颜色为绿色 */
    font-size: 12px; /* 字体大小为 12px */
    margin-left: 10px; /* 左侧外边距为 10px */
    margin-right: 18px; /* 右侧外边距为 18px */
}






/* 手机端查单按钮样式 */
.query-m {
    display: none; /* 默认隐藏按钮 */
    position: fixed; /* 固定定位，按钮不随页面滚动 */
    width: 60px; /* 按钮宽度为 60px */
    height: 60px; /* 按钮高度为 60px */
    background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%); /* 按钮背景为蓝色渐变 */
    border-radius: 50%; /* 圆形按钮 */
    right: 20px; /* 距离页面右侧 20px */
    bottom: 20%; /* 距离页面底部的 20% */
    box-shadow: 0 5px 6px 0 rgba(73, 105, 230, .22); /* 设置按钮阴影效果 */
}

/* 手机端查单按钮中的链接样式 */
.query-m a {
    width: 60px; /* 链接宽度与父容器相同 */
    height: 60px; /* 链接高度与父容器相同 */
    display: inline-block; /* 显示为行内块元素 */
}

/* 手机端查单按钮中的图标样式 */
.query-m svg {
    margin-left: 15px; /* 图标左侧外边距为 15px */
    margin-top: 6px; /* 图标顶部外边距为 6px */
}

/* 手机端查单按钮中的文字样式 */
.query-m span {
    color: #fff; /* 字体颜色为白色 */
    display: block; /* 显示为块级元素 */
    text-align: center; /* 文本水平居中 */
    margin-top: -5px; /* 顶部外边距为 -5px，调整文本位置 */
    font-weight: 700; /* 字体加粗 */
}

/* 扫码下单按钮样式 */
.order-m {
    cursor: pointer; /* 鼠标悬浮时显示为手型指针 */
    position: fixed; /* 固定定位，按钮不随页面滚动 */
    width: 70px; /* 按钮宽度为 70px */
    height: 70px; /* 按钮高度为 70px */
    background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%); /* 按钮背景为蓝色渐变 */
    border-radius: 50%; /* 圆形按钮 */
    right: 100px; /* 距离页面右侧 100px */
    bottom: 20%; /* 距离页面底部的 20% */
    box-shadow: 0 5px 6px 0 rgba(73, 105, 230, .22); /* 设置按钮阴影效果 */
}


/* 扫码下单按钮中的链接样式 */
.order-m a {
    width: 70px; /* 链接宽度为 70px，与父容器一致 */
    height: 70px; /* 链接高度为 70px，与父容器一致 */
    display: inline-block; /* 显示为行内块元素 */
}

/* 扫码下单按钮中的图标样式 */
.order-m svg {
    margin-left: 17.5px; /* 图标左侧外边距为 17.5px，居中调整 */
    margin-top: 6px; /* 图标顶部外边距为 6px，调整垂直位置 */
}

/* 扫码下单按钮中的文字样式 */
.order-m span {
    color: #fff; /* 字体颜色为白色 */
    display: block; /* 设置为块级元素 */
    text-align: center; /* 文本水平居中 */
    margin-top: -4px; /* 顶部外边距为 -4px，微调文字位置 */
    font-weight: 700; /* 字体加粗 */
}

/* 购买按钮容器样式 */
.buy {
    text-align: center; /* 内容水平居中 */
    margin-top: 10px; /* 顶部外边距为 10px */
}

/* 购买按钮样式 */
.buy button {
    border: initial; /* 清除默认边框样式 */
    color: #fff; /* 按钮字体颜色为白色 */
    display: inline-block; /* 显示为行内块元素 */
    width: 170px; /* 按钮宽度为 170px */
    font-size: 18px; /* 字体大小为 18px */
    font-weight: 700; /* 字体加粗 */
    line-height: 45px; /* 行高为 45px，用于垂直居中 */
    border-radius: 100px; /* 圆角半径为 100px，形成椭圆按钮 */
    cursor: pointer; /* 鼠标悬浮时显示为手型指针 */
    -webkit-user-select: none; /* 禁止 Webkit 浏览器的文本选择 */
    -moz-user-select: none; /* 禁止 Mozilla 浏览器的文本选择 */
    -ms-user-select: none; /* 禁止 IE 浏览器的文本选择 */
    user-select: none; /* 禁止所有浏览器的文本选择 */
    box-shadow: 0 5px 6px 0 rgba(73, 105, 230, .22); /* 设置按钮阴影效果 */
    background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%); /* 按钮背景为蓝色渐变 */
}

/* 页面简介样式 */
.intro {
    padding: 10px 20px; /* 内边距，上下为 10px，左右为 20px */
    color: #444444; /* 字体颜色为深灰色 */
    font-size: 14px; /* 字体大小为 14px */
    line-height: 2.2; /* 行高为 2.2 */
    letter-spacing: .5px; /* 字母间距为 0.5px */
    font-weight: 700; /* 字体加粗 */
}

/* 页面底部样式 */
.footer {
    margin-top: 50px; /* 顶部外边距为 50px */
    margin-bottom: 15px; /* 底部外边距为 15px */
    text-align: center; /* 内容水平居中 */
    color: #9a9a9a; /* 字体颜色为浅灰色 */
}


/* 首页提示框样式 */
.home-tips {
    border-radius: 12px !important; /* 圆角半径为 12px，优先级最高 */
}

/* 提示框标题样式 */
.home-tips .layui-layer-title {
    background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%); /* 标题背景为蓝色渐变 */
    color: #fff !important; /* 标题字体颜色为白色，优先级最高 */
    height: 40px; /* 标题高度为 40px */
    line-height: 40px; /* 行高为 40px，用于垂直居中 */
    border-radius: 10px 10px 0 0; /* 标题顶部圆角 */
    background-color: initial; /* 背景颜色使用默认值 */
    border-bottom: initial; /* 清除底部边框样式 */
    font-size: 16px; /* 字体大小为 16px */
    font-weight: 700; /* 字体加粗 */
    text-align: center; /* 文本水平居中 */
    padding: initial; /* 使用默认内边距 */
    overflow: hidden; /* 超出部分隐藏 */
}

/* 提示框关闭按钮容器样式 */
.home-tips .layui-layer-setwin {
    color: #fff; /* 关闭按钮的颜色为白色 */
    position: absolute; /* 设置为绝对定位 */
    top: initial; /* 清除顶部位置设置 */
    bottom: -50px; /* 距离底部 -50px */
    left: 50%; /* 水平位置居中 */
    transform: translate(-50%, 0); /* 使用变换实现精确居中 */
    width: 30px; /* 容器宽度为 30px */
    height: 30px; /* 容器高度为 30px */
}

/* 提示框关闭按钮样式 */
.home-tips .layui-layer-setwin a {
    position: initial; /* 使用默认定位 */
}

/* 提示框内容样式 */
.home-tips .layui-layer-content {
    padding: 10px 20px; /* 内边距，上下为 10px，左右为 20px */
    color: #444444; /* 内容字体颜色为深灰色 */
    font-size: 14px; /* 字体大小为 14px */
    line-height: 2.2; /* 行高为 2.2 */
    letter-spacing: .5px; /* 字符间距为 0.5px */
    font-weight: 700; /* 字体加粗 */
    word-wrap: break-word; /* 自动换行，避免内容溢出 */
    word-break: normal; /* 使用默认单词断行规则 */
}

/* 扫码区域样式 */
.qr {
    text-align: center; /* 内容水平居中 */
    position: relative; /* 设置为相对定位 */
}

/* 扫码区域中的 SVG 图标样式 */
.qr svg {
    display: block; /* 显示为块级元素 */
    margin: 0 auto; /* 水平居中 */
}

/* 扫码区域中的图片样式 */
.qr img {
    height: 300px; /* 图片高度为 300px */
    position: absolute; /* 设置为绝对定位 */
    top: 50%; /* 距离顶部 50% */
    left: 50%; /* 距离左侧 50% */
    transform: translate(-50%, -50%); /* 使用变换实现精确居中 */
}

/* 购买页商品图片容器样式 */
.main-box .goods-img {
    margin-left: 20px; /* 左侧外边距为 20px */
    margin-right: 10px; /* 右侧外边距为 10px */
    margin-top: 10px; /* 顶部外边距为 10px */
    width: calc(100% - 30px); /* 容器宽度为父元素宽度减去 30px */
    height: 0; /* 高度设置为 0，后续使用 padding 模拟比例 */
    position: relative; /* 设置为相对定位 */
    padding-bottom: calc(100% - 40px); /* 设置容器的高度比例 */
}

/* 购买页商品信息容器样式 */
.main-box .goods-msg {
    margin-right: 20px; /* 右侧外边距为 20px */
    margin-left: 10px; /* 左侧外边距为 10px */
    margin-top: 20px; /* 顶部外边距为 20px */
}

/* 商品图片样式 */
.main-box .goods-img img {
    width: calc(100% - 10px); /* 图片宽度为父容器宽度减去 10px */
    box-shadow: 0 5px 6px 0 rgba(73, 105, 230, .22); /* 添加图片阴影效果 */
    border-radius: 5px; /* 圆角半径为 5px */
    margin-top: 5px; /* 图片顶部外边距为 5px */
    height: 100%; /* 图片高度为父容器高度 */
    position: absolute; /* 设置为绝对定位 */
    object-fit: cover; /* 图片自动适应容器并裁剪 */
}

/* 商品名称样式 */
.main-box .goods-msg .goods-name {
    font-weight: 700; /* 字体加粗 */
    font-size: 20px; /* 字体大小为 18px */
    color: #ff8800; /* 字体颜色为白色色 */
    border-bottom: 3px solid #ffffff; /* 下边框为白色实线 */
    padding-bottom: 5px; /* 下边内边距为 5px */
}


/* 下拉框选中项的样式 */
.layui-form-select dl dd.layui-this {
    background-color: #22b6f2; /* 设置选中项的背景颜色为浅蓝色 */
}

/* 提示框通用样式 */
.small-tips {
    display: inline-block; /* 显示为行内块元素 */
    padding: 1px 5px; /* 上下内边距为 1px，左右内边距为 5px */
    border-radius: 3px; /* 圆角半径为 3px */
    font-size: 11px; /* 字体大小为 11px */
    margin-left: 5px; /* 左侧外边距为 5px */
    line-height: initial; /* 使用默认行高 */
}

/* 不同颜色的提示框样式 */
.tips-cyan {
    background: #ccdcf6; /* 浅蓝背景 */
    color: #2F4056; /* 深蓝字体颜色 */
}

.tips-pink {
    background: #ffebe8; /* 浅红背景 */
    color: #fb636b; /* 红色字体颜色 */
}

.tips-green {
    background: #dff7ea; /* 浅绿背景 */
    color: #28C76F; /* 绿色字体颜色 */
}

.tips-yellow {
    background: #fbf7da; /* 浅黄色背景 */
    color: #d6b900; /* 黄色字体颜色 */
}

.tips-blue {
    background: #cadbff; /* 浅蓝背景 */
    color: #3C8CE7; /* 蓝色字体颜色 */
}

.tips-red {
    background: #ffd3d3; /* 浅红背景 */
    color: #FA016D; /* 深红字体颜色 */
}

.tips-black {
    background: #262626; /* 黑色背景 */
    color: #ffffff; /* 白色字体颜色 */
}

/* 支付区域样式 */
.pay {
    margin-top: 20px; /* 顶部外边距为 20px */
    border-top: 5px solid #ffffff; /* 顶部边框为白色实线 */
    padding-top: 10px; /* 顶部内边距为 10px */
}

/* 支付方式容器样式 */
.pay-type {
    display: inline-block; /* 显示为行内块元素 */
    text-align: center; /* 文本水平居中 */
    background: #ffffff; /* 背景颜色为浅灰色 */
    border: 2px solid #e7e7e7; /* 边框颜色为深浅灰色 */
    border-radius: 5px; /* 圆角半径为 5px */
    position: relative; /* 设置为相对定位 */
    padding: 7px 10px; /* 上下内边距为 7px，左右内边距为 10px */
    margin-right: 10px; /* 右侧外边距为 10px */
    margin-bottom: 10px; /* 底部外边距为 10px */
    cursor: pointer; /* 鼠标悬浮时显示为手型指针 */
}

/* 支付方式中的图标样式 */
.pay-type svg {
    vertical-align: middle; /* 垂直居中对齐 */
}

/* 选中支付方式样式 */
.pay-select {
    border: 2px solid rgb(51, 105, 255); /* 边框颜色为蓝色 */
    background: #FF8800; /* 背景颜色为浅蓝 */
    color: #FFFFFF; /* 字体颜色为蓝色 */
}

/* 销售信息样式 */
.sale {
    margin-top: 5px; /* 顶部外边距为 5px */
    margin-left: -5px; /* 左侧外边距为 -5px，向左偏移 */
}

/* 销售提示框样式 */
.sale .small-tips {
    margin-bottom: 5px; /* 底部外边距为 5px */
}

/* 信息标签样式 */
.l-msg {
    color: #999; /* 字体颜色为灰色 */
    width: 72px; /* 宽度为 72px */
    display: inline-block; /* 显示为行内块元素 */
    vertical-align: middle; /* 垂直居中对齐 */
}

/* 商品价格区域样式 */
.price {
    margin-top: 5px; /* 顶部外边距为 5px */
}

/* 商品价格符号样式 */
.price .price-sign {
    color: #FF0000; /* 字体颜色为红色 */
    font-size: 32px; /* 字体大小为 16px */
        font-weight: 700; /* 字体加粗 */
}

/* 商品价格数字样式 */
.price .price-num {
    color:#FF0000; /* 字体颜色为红色 */
    font-size: 32px; /* 字体大小为 22px */
           font-weight: 700; /* 字体加粗 */
}

/* 商品价格补充说明样式 */
.price .price-c {
    margin-left: 5px; /* 左侧外边距为 5px */
    color: #000000; /* 字体颜色为黑色 */
    font: 18px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif; /* 字体样式和大小 */
}


/* 条目外边距样式 */
.entry {
    margin-top: 15px; /* 顶部外边距为 15px */
}

/* 支付数字输入框样式 */
.pay-num {
    width: 150px !important; /* 宽度固定为 50px，优先级最高 */
    text-align: center; /* 文本水平居中 */
    font-size: 20px !important; /* 字体大小为 20px，优先级最高 */
}

/* 加减按钮中的图标样式 */
.sub svg, .add svg {
    vertical-align: middle; /* 图标垂直居中对齐 */
    margin-top: -7px; /* 顶部外边距为 -7px，微调位置 */
    cursor: pointer; /* 鼠标悬浮时显示为手型指针 */
}

/* 通用输入框样式 */
.input input {
    display: inline-block; /* 显示为行内块元素 */
    padding: 0 5px; /* 左右内边距为 5px */
    height: 35px; /* 输入框高度为 35px */
    width: 300px; /* 输入框宽度为 300px */
    font-weight: 700; /* 字体加粗程度为 500 */
    font-size: 14px; /* 字体大小为 14px */
    color: #000000; /* 字体颜色为浅灰色 */
    background: #fff; /* 背景颜色为白色 */
    border: 1px solid #f0f0f0; /* 边框颜色为浅灰色 */
    -webkit-box-shadow: 0 4px 10px 0 rgba(135, 142, 154, .07); /* 设置 Webkit 阴影 */
    box-shadow: 0 4px 10px 0 rgba(135, 142, 154, .07); /* 设置通用阴影 */
    border-radius: 4px; /* 圆角半径为 4px */
    overflow: hidden; /* 超出部分隐藏 */
}

/* 验证码图片样式 */
.code img {
    height: 35px; /* 图片高度为 35px */
    border-radius: 4px; /* 圆角半径为 4px */
    border: 1px solid #f0f0f0; /* 边框颜色为浅灰色 */
    vertical-align: middle; /* 垂直居中对齐 */
    margin-top: -3px; /* 顶部外边距为 -3px，微调位置 */
}

/* 验证码输入框样式 */
.code input {
    width: 178px !important; /* 输入框宽度固定为 178px，优先级最高 */
}

/* 极验等待提示样式 */
#wait-geetest-captcha {
    color: #999; /* 字体颜色为浅灰色 */
}

/* 错误标题样式 */
.err_title {
    color: #545454; /* 字体颜色为灰色 */
    font-size: 20px; /* 字体大小为 20px */
    font-weight: 700; /* 字体加粗 */
    margin-top: 20px; /* 顶部外边距为 20px */
}

/* 错误内容样式 */
.err_content {
    margin-top: 30px; /* 顶部外边距为 30px */
    margin-bottom: 30px; /* 底部外边距为 30px */
    color: #737373; /* 字体颜色为深灰色 */
}

/* 错误按钮容器样式 */
.err_but {
    padding-bottom: 100px; /* 底部内边距为 100px */
}


/* 按钮通用样式 */
.btn a, .btn button {
    border: initial; /* 无边框 */
    text-align: center; /* 文本水平居中 */
    font-size: 18px; /* 字体大小为 18px */
    font-weight: 700; /* 字体加粗 */
    color: #fff; /* 字体颜色为白色 */
    display: inline-block; /* 显示为行内块元素 */
    width: 160px; /* 按钮宽度为 160px */
    line-height: 45px; /* 行高为 45px */
    margin-top: 15px; /* 顶部外边距为 15px */
    border-radius: 100px; /* 圆角半径为 100px */
    cursor: pointer; /* 鼠标悬浮时显示为手型指针 */
    -webkit-user-select: none; /* 禁止 Webkit 浏览器文本选择 */
    -moz-user-select: none; /* 禁止 Mozilla 浏览器文本选择 */
    -ms-user-select: none; /* 禁止 IE 浏览器文本选择 */
    user-select: none; /* 禁止文本选择 */
    box-shadow: 0 5px 6px 0 rgba(73, 105, 230, .22); /* 按钮阴影效果 */
    background-image: #FF8800; /* 背景渐变为蓝色 */

}




/* 支付标题样式 */
.pay-title {
    color: #ff8800; /* 字体颜色为深灰色 */
    font-weight: 700; /* 字体加粗 */
    font-size: 20px; /* 字体大小为 20px */
    margin: 0 15px; /* 左右外边距为 15px */
}

/* 订单列表样式 */
.order-list {
    margin-left: initial; /* 默认左外边距 */
    margin-right: initial; /* 默认右外边距 */
    margin-top: 10px; /* 顶部外边距为 10px */
    border-bottom: 1px solid #f7f7f7; /* 底部边框为浅灰色实线 */
    padding-bottom: 5px; /* 底部内边距为 5px */


}

/* 订单详情 信息显示区域样式 */
.info-ui {
    color: #000000; /* 字体颜色为黑色 */
        font-weight: 700; /* 字体加粗 */
            font-size: 14px; /* 字体大小为 20px */
}

/* 信息标题样式 */
.info-ui strong {
    width: 30%; /* 宽度为 30% */
    margin-bottom: 3px; /* 底部外边距为 3px */
    text-align: right; /* 文本右对齐 */
    display: inline-block; /* 显示为行内块元素 */
}

/* 订单信息输入框样式 */
.order-info {
    width: calc(100% - 12px); /* 宽度为父元素宽度减去 12px */
    height: 75px; /* 高度为 75px */
    overflow-wrap: break-word; /* 自动换行，避免内容溢出 */
    padding: 5px; /* 内边距为 5px */
    overflow: auto; /* 内容超出时滚动 */
    resize: none !important; /* 禁止调整大小，优先级最高 */
    border: 1px solid #ff8800; /* 边框颜色为橙色色 */
    -webkit-box-shadow: 0 4px 10px 0 rgba(135, 142, 154, .07); /* Webkit 阴影效果 */
    box-shadow: 0 4px 10px 0 rgba(135, 142, 154, .07); /* 通用阴影效果 */
    border-radius: 4px; /* 圆角半径为 4px */
}

/* 手机端适配样式 */
@media (max-width: 768px) {
    body {
        background: initial; /* 使用默认背景 */
    }
    .header {
        background-image: linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%); /* 渐变背景 */
        color: #fff; /* 字体颜色为白色 */
        height: 205px; /* 高度为 205px */
        margin-bottom: -145px; /* 底部外边距为 -145px */
        border-radius: 0 0 10px 10px; /* 底部圆角 */
    }
    .header .info {
        color: #fff !important; /* 字体颜色为白色，优先级最高 */
    }
    .query-m {
        display: initial; /* 显示查询按钮 */
    }
    .order-m {
        display: none; /* 隐藏扫码下单按钮 */
    }
    .input input {
        width: calc(100% - 95px); /* 宽度为父元素宽度减去 95px */
    }
    .code input {
        width: calc(100% - 219px) !important; /* 宽度为父元素宽度减去 219px，优先级最高 */
    }
    .main-box .goods-msg {
        margin-left: 20px; /* 左侧外边距为 20px */
    }
    .main .goods .goods-price div {
        margin-bottom: 5px; /* 底部外边距为 5px */
    }
    .geetest_holder.geetest_wind {
        margin-top: 10px; /* 顶部外边距为 10px */
    }
    .order-info {
        margin-top: 10px; /* 顶部外边距为 10px */
    }
}

/* 超小屏幕适配样式 */
@media (max-width: 425px) {
    .main .cate .cate-box {
        min-width: calc(50% - 60px); /* 最小宽度为父元素的一半减去 60px */
    }
}