/* ==================================================
   闰土卡网  -  walo888(好权益hqy模板) 1:1 复刻
   顶部#EFF0F1 导航#00A2CA(hover红#f44336) 标题#006493
   价格橙#ef640b 公告橙#ff8020 商品行hover浅黄
================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei","微软雅黑",Arial,sans-serif; background: #f1f1f1; color: #666; font-size: 14px; }
a { text-decoration: none; color: #0089C9; }
a:hover { color: #006493; }
li { list-style: none; }
.ziti { font-family: "Microsoft YaHei","微软雅黑",Arial,sans-serif; }

/* ===== 顶部细条 ===== */
.haoquanyi_head_top { width: 100%; height: 37px; background-color: #EFF0F1; }
.haoquanyi_head_top .head_top_box1 { margin: auto; width: 1200px; }
.haoquanyi_head_top .haoquanyi_head_top_left { margin: auto; float: left; font-size: 14px; display: flex; flex-wrap: wrap; }
.haoquanyi_head_top .haoquanyi_head_top_left li { margin: auto; padding: 8px 5px; font-size: 12px; color: #727272; text-align: center; }
.haoquanyi_head_top .haoquanyi_head_top_right { float: right; display: flex; flex-wrap: wrap; }
.haoquanyi_head_top .haoquanyi_head_top_right li { margin: auto; padding: 5px 2px; }
.hqy-top-btn { display: inline-block; height: 24px; line-height: 24px; padding: 0 10px; border-radius: 3px; font-size: 12px; color: #fff; margin-left: 6px; }
.hqy-top-btn.qq { background: #4fb7f5; }
.hqy-top-btn.login { background: #ff7043; }
.hqy-top-btn.reg { background: #ffa62b; }

/* ===== 头部(logo+搜索) ===== */
.haoquanyi_head { background: linear-gradient(to top right, #ffffff 69%, #eee 89%); }
.haoquanyi_head .hqy_top { width: 1200px; margin: 0 auto; height: 96px; display: flex; align-items: center; }
.haoquanyi_head .hqy_logo a { display: flex; align-items: center; font-size: 30px; font-weight: bold; color: #006493; }
.haoquanyi_head .hqy_logo .logo-ico { font-size: 44px; margin-right: 8px; }
.haoquanyi_head .search_shop { margin-left: auto; display: flex; align-items: center; }
.haoquanyi_head .search_shop li { margin: 0; }
.haoquanyi_head .search_shop input { width: 380px; height: 38px; border: 1px solid #cccccc; border-radius: 3px; padding: 0 12px; font-size: 14px; outline: none; background: #fff; }
.haoquanyi_head .search_shop button { height: 38px; padding: 0 22px; background: #007BDA; border: none; border-radius: 3px; color: #fff; font-size: 15px; cursor: pointer; margin-left: 6px; }
.haoquanyi_head .search_shop button:hover { background: #0063b4; }

/* ===== 导航 ===== */
.haoquanyi_head .haoquanyi_com_navigation { border-top: 1px solid #017390; border-bottom: 1px solid #017390; width: 100%; height: 53px; background: #00A2CA; }
.haoquanyi_head .haoquanyi_com_navigation .hqy_top_nav { width: 1200px; margin: 0 auto; height: 50px; }
.haoquanyi_head .haoquanyi_com_navigation .hqy_top_nav li { display: inline; height: 60px; position: relative; }
.haoquanyi_head .haoquanyi_com_navigation .hqy_top_nav li span { display: inline-block; background-color: #017390; color: #ffffff; font-weight: bold; font-size: 17px; width: 225px; height: 53px; line-height: 53px; text-align: center; cursor: pointer; }
.haoquanyi_head .haoquanyi_com_navigation .hqy_top_nav li a { display: inline-block; padding: 0 22px; height: 53px; line-height: 53px; color: #FFF; font-family: "Microsoft YaHei","微软雅黑"; font-size: 16px; }
.haoquanyi_head .haoquanyi_com_navigation .hqy_top_nav li a:hover { background: #f44336; }
/* 分类下拉 */
.hqy-sub-menu { display: none; position: absolute; top: 53px; left: 0; z-index: 99; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.18); width: 225px; }
.hqy-nav-open:hover .hqy-sub-menu { display: block; }
.hqy-sub-menu a { display: block !important; width: 100%; height: auto !important; line-height: 40px !important; padding: 0 20px !important; color: #555 !important; font-size: 14px !important; border-bottom: 1px solid #f2f2f2; }
.hqy-sub-menu a:hover { background: #eaf6fd !important; color: #007BDA !important; }

/* ===== 公告跑马灯 ===== */
.index-gonggao { background-color: #EFF0F1; border: 1px solid #e2e2e2; }
.index-gonggao .box { margin: 0 auto; display: flex; width: 1200px; text-align: center; cursor: pointer; }
.index-gonggao .box li { margin: 7px; overflow: hidden; font-size: 14px; color: #ff8020; text-align: left; }

/* ===== 主体容器 ===== */
.index-top-box { width: 1200px; margin: auto; background-color: #fff; padding-top: 5px; }
.main { width: 1200px; margin: 12px auto; min-height: 500px; }
.alert { border-radius: 3px; padding: 12px 16px; margin-bottom: 14px; font-size: 14px; }
.alert-success { background: #edf8ee; color: #0c7a2e; border: 1px solid #bfe8c7; }
.alert-error { background: #fdf0f0; color: #b00909; border: 1px solid #f3c6c6; }
.alert-warning { background: #fff8ed; color: #8a5a00; border: 1px solid #f5dfb8; }

/* ===== 商品分类区块 ===== */
.index-box1 { overflow: hidden; height: auto; margin-top: 15px; border-radius: 3px; border: 1px solid #e9eaec; }
.index-box1 .index-box1-title { overflow: hidden; padding: 11px; background-color: #EFF0F1; font-size: 18px; cursor: pointer; color: #006493; border-radius: 5px 5px 0 0; font-weight: bold; }
.index-box1 .index-box1-title .ico { font-size: 18px; }
.index-box1 .index-box1-title span { float: right; overflow: hidden; font-size: 13px; color: #8d8d8d; font-weight: normal; }
.index-box1 .index-box1-title a:hover { color: #f44336; }
.index-box1 .index-box1-type { overflow: hidden; padding: 0; background-color: #f6f7f8; display: flex; align-items: center; justify-content: left; color: darkgrey; }
.index-box1 .index-box1-type > div { float: left; overflow: hidden; padding: 10px; font-size: 14px; }
.index-box1 .index-box1-type .type1 { width: 520px; display: flex; }
.index-box1 .index-box1-type .type2 { width: 90px; text-align: center; }
.index-box1 .index-box1-type .type3 { width: 90px; text-align: center; }
.index-box1 .index-box1-type .type4 { width: 110px; text-align: center; }
.index-box1 .index-box1-type .type5 { width: 90px; text-align: center; }

/* 商品行 */
.index-box1 .index-box1-shop { overflow: hidden; padding: 0; background-color: #ffffff; display: flex; align-items: center; justify-content: left; border-bottom: 1px solid #EFF0F1; }
.index-box1 .index-box1-shop:hover { background-color: rgba(255, 254, 149, 0.45); }
.index-box1 .index-box1-shop > div { float: left; overflow: hidden; padding: 12px 10px; }
.index-box1 .index-box1-shop .shop1 { text-align: left; font-size: 16px; color: #6f7070; width: 520px; }
.index-box1 .index-box1-shop .shop1 .biaoqian { display: inline-block; width: auto; min-width: 50px; font-size: 13px; color: #FFF; padding: 4px 8px; border-radius: 3px; margin-right: 6px; background-color: #ff5722; }
.index-box1 .index-box1-shop .shop1 .tuijian { color: #f44336; }
.index-box1 .index-box1-shop .shop2 { width: 90px; text-align: center; }
.index-box1 .index-box1-shop .shop2 .money { font-size: 16px; color: #ef640b; font-weight: bold; }
.index-box1 .index-box1-shop .shop3 { width: 90px; text-align: center; }
.index-box1 .index-box1-shop .shop3 .pfmoney { font-size: 16px; color: #ef640b; }
.index-box1 .index-box1-shop .shop3 .pifa { font-size: 12px; color: #acacac; }
.index-box1 .index-box1-shop .shop4 { width: 110px; text-align: center; }
.index-box1 .index-box1-shop .shop4 .stock { color: #007bda; font-size: 15px; }
.index-box1 .index-box1-shop .shop5 { width: 90px; text-align: center; }

/* 按钮(layui风格) */
.hqy-btn { display: inline-block; height: 30px; line-height: 30px; padding: 0 16px; border: none; border-radius: 3px; font-size: 14px; cursor: pointer; background: #1E9FFF; color: #fff; }
.hqy-btn:hover { background: #0f8ae0; color: #fff; }
.hqy-btn.danger { background: #FF5722; }
.hqy-btn.danger:hover { background: #e8461a; }
.hqy-btn.disabled { background: #d2d2d2; cursor: not-allowed; }
.hqy-btn.success { background: #009688; }
.hqy-btn.success:hover { background: #007d72; }

/* ===== 通用卡片/表单 ===== */
.card { background: #fff; border: 1px solid #e9eaec; border-radius: 3px; padding: 20px; margin-bottom: 16px; }
.card h3 { font-size: 16px; color: #333; margin-bottom: 14px; padding-left: 8px; border-left: 4px solid #00A2CA; }
.form-box { background: #fff; border: 1px solid #e9eaec; border-radius: 3px; padding: 30px; max-width: 420px; margin: 30px auto; }
.form-box h2 { margin-bottom: 20px; font-size: 20px; color: #333; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 14px; color: #555; }
.form-control { width: 100%; border: 1px solid #cccccc; border-radius: 3px; padding: 10px 12px; font-size: 14px; outline: none; }
.form-control:focus { border-color: #007BDA; }
.form-tip { font-size: 12px; color: #999; margin-top: 4px; }

/* 支付方式 */
.pay-types { display: flex; gap: 12px; margin: 16px 0; }
.pay-type { flex: 1; border: 2px solid #eef0f1; border-radius: 4px; padding: 14px; text-align: center; cursor: pointer; }
.pay-type.selected { border-color: #007BDA; background: #eaf6fd; }
.pay-type .icon { font-size: 26px; display: block; margin-bottom: 6px; }
.pay-type .label { font-size: 13px; color: #555; }

/* 订单/卡密 */
.order-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #eee; font-size: 14px; }
.order-row:last-child { border: none; }
.cards-box { background: #0f172a; color: #4ade80; border-radius: 4px; padding: 16px; font-family: Consolas, monospace; font-size: 13px; line-height: 1.8; white-space: pre-wrap; word-break: break-all; }
.tip-box { background: #eaf6fd; border: 1px solid #c2e5f7; border-radius: 4px; padding: 14px; font-size: 13px; color: #0073A8; }

/* 表格 */
.table { width: 100%; border-collapse: collapse; background: #fff; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid #f1f1f1; font-size: 13px; text-align: left; }
.table th { background: #f6f7f8; color: #555; font-weight: 600; }

/* 分页 */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
.pagination a, .pagination span { padding: 6px 12px; border: 1px solid #e5e5e5; border-radius: 3px; font-size: 13px; color: #555; background: #fff; }
.pagination .current { background: #00A2CA; color: #fff; border-color: #00A2CA; }

/* 商品详情 */
.product-detail { background: #fff; border: 1px solid #e9eaec; border-radius: 3px; padding: 24px; }
.product-detail .pd-head { display: flex; gap: 24px; }
.product-detail .pd-cover { width: 220px; height: 150px; background: linear-gradient(135deg, #67c3ec, #00A2CA); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 56px; color: #fff; flex-shrink: 0; }
.product-detail .pd-name { font-size: 22px; font-weight: 700; color: #333; margin-bottom: 10px; }
.product-detail .pd-meta { font-size: 14px; color: #666; line-height: 1.9; }
.product-detail .pd-price { color: #ef640b; font-size: 26px; font-weight: 700; margin: 10px 0; }
.product-detail .desc { margin-top: 20px; border-top: 1px dashed #e5e5e5; padding-top: 16px; font-size: 14px; line-height: 1.9; color: #555; white-space: pre-line; }

/* ===== 商品详情(walo888 trade 布局) ===== */
.crumbs { background: #fff; border: 1px solid #e9eaec; border-radius: 3px; padding: 10px 16px; margin-bottom: 12px; font-size: 14px; color: #666; }
.crumbs a { color: #006493; }
.trade-goodinfo { background-color: #eeeeee; padding: 20px; margin-bottom: 0; font-size: 24px; color: #333; font-weight: bold; border-radius: 4px 4px 0 0; }
.trade-goodinfo .tj-tag { display: inline-block; background: #f44336; color: #fff; font-size: 13px; font-weight: normal; padding: 3px 10px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.trade-goodinfo2 { background-color: #f5f6f6; padding: 18px 20px; font-size: 16px; color: #444; }
.trade-goodinfo2 .from_wz_3 { float: left; width: 26%; line-height: 38px; margin-right: 2%; text-align: right; color: #666; }
.trade-goodinfo2 .from_in_3 { float: left; width: 40%; text-align: left; line-height: 38px; }
.trade-goodinfo2 .from_off_4 { float: left; width: 60%; min-height: 40px; display: block; margin-bottom: 6px; }
.trade-goodinfo2 .from_in_4 { float: left; text-align: left; line-height: 40px; }
.trade-goodinfo2 .trade-price { color: #F40; font-size: 26px; font-weight: 700; }
.xiangqing { margin: 12px 0; background: #fff; border: 1px solid #e9eaec; border-radius: 3px; min-height: 260px; }
.xiangqing .xq-title { padding: 12px 16px; background: #f6f7f8; border-bottom: 1px solid #e9eaec; font-size: 16px; color: #006493; font-weight: bold; }

/* 用户中心 */
.user-layout { display: flex; gap: 20px; }
.user-side { width: 180px; flex-shrink: 0; }
.user-side a { display: block; background: #fff; padding: 12px 16px; margin-bottom: 6px; border-radius: 3px; color: #555; font-size: 14px; border: 1px solid #e9eaec; }
.user-side a.active, .user-side a:hover { background: #00A2CA; color: #fff; border-color: #00A2CA; }
.user-main { flex: 1; min-width: 0; }

/* 统计 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { background: #fff; border: 1px solid #e9eaec; border-radius: 4px; padding: 18px; }
.stat-card .num { font-size: 24px; font-weight: 700; color: #00A2CA; }
.stat-card .lbl { font-size: 13px; color: #888; margin-top: 4px; }

/* ===== 底部(walo888 pc-footer) ===== */
.pc-footer { margin-top: 60px; overflow: hidden; clear: both; background: linear-gradient(to top, #ffffff91, #efefef, #e5e5e5); border-top: 12px solid #ebebeb; }
.pc-footer .nb { width: 1200px; margin: 0 auto; }
.pc-footer .nb .promise { overflow: hidden; clear: both; padding: 38px 72px 36px; border-bottom: 1px solid #efeaea; }
.pc-footer .nb .promise ul { list-style: none; }
.pc-footer .nb .promise ul li { width: 25%; float: left; text-align: center; }
.pc-footer .nb .promise .promise-box { display: flex; align-items: flex-start; justify-content: center; }
.pc-footer .nb .promise .promise-box .yec-icon { width: 52px; height: 52px; border-radius: 100%; background: #e6f0f7; margin: 0 auto; font-size: 28px; line-height: 52px; text-align: center; flex-shrink: 0; }
.pc-footer .nb .promise .promise-box .word { width: 72%; text-align: left; margin-left: 15px; }
.pc-footer .nb .promise .promise-box h3 { font-size: 17px; color: #333; margin-bottom: 8px; }
.pc-footer .nb .promise .promise-box p { font-size: 13px; color: #888; line-height: 1.8; }
.pc-footer .nb .copyright { font-size: 14px; text-align: center; padding: 15px 0; color: #a4a4a4; line-height: 2; }
.pc-footer .nb .copyright a, .pc-footer .nb .copyright b { color: #858585; }
@media (max-width: 768px) {
  .pc-footer .nb .promise { padding: 20px 12px; }
  .pc-footer .nb .promise ul li { width: 50%; margin-bottom: 16px; }
  .pc-footer .nb { width: 100%; }
}

@media (max-width: 768px) {
  .haoquanyi_head .hqy_top, .index-gonggao .box, .main, .index-top-box { width: 100%; padding: 0 8px; }
  .haoquanyi_head .hqy_top { flex-wrap: wrap; height: auto; padding: 10px 0; }
  .haoquanyi_head .search_shop input { width: 100%; }
  .haoquanyi_head .haoquanyi_com_navigation .hqy_top_nav li span { width: 120px; font-size: 15px; }
  .haoquanyi_head .haoquanyi_com_navigation .hqy_top_nav li a { padding: 0 10px; font-size: 14px; }
  .index-box1 .index-box1-type .type1, .index-box1 .index-box1-shop .shop1 { width: 40%; }
  .user-layout { flex-direction: column; }
  .user-side { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .user-side a { margin-bottom: 0; }
}