/* ===== CSS 变量 (主题 Token) ===== */
:root {
  --color-primary: #2B86D4;
  --color-primary-hover: #1e6fb5;
  --color-accent: #7fbb39;
  --color-accent-hover: #6aa02c;
  --color-dark: #0f1724;
  --color-dark-header: rgba(15, 23, 36, 0.92);
  --color-bg-overlay: rgba(0, 0, 0, 0.45);
  --color-text: #333333;
  --color-text-light: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.75);
  --color-shadow: rgba(0, 0, 0, 0.25);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 18px rgba(0,0,0,0.18);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.28);

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}

/* ===== 重置 ===== */
*{
	margin:0;
	padding:0;
	font-family: Microsoft YaHei, "微软雅黑", "PingFang SC", sans-serif;
	box-sizing: border-box;
}
body{
   background: #ffffff;
   background-size: cover;
   background-attachment: fixed;
   background-image: url("../images/bg.jpg");
   background-repeat: no-repeat;
   background-position: center center;
   min-width: 1200px;
   position: relative;
}
/* 背景遮罩增强可读性 */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(10,15,30,0.55) 0%, rgba(10,15,30,0.35) 50%, rgba(10,15,30,0.55) 100%);
  z-index: -1;
  pointer-events: none;
}

i{
	font-style: normal;
}
a{
	text-decoration: none;
	color: var(--color-text-light);
	transition: color var(--transition-fast);
}
a:hover{
	color: var(--color-accent);
}

img{
	width: 100%;
}

.f_left{ float: left; }
.f_right{ float: right; }
.c_float{ overflow: hidden; }

.color_9{ color:#999; }
.color_f{ color:#fff; }
.color_yellow{ color: #ecc672; }
.color_green{ color: var(--color-accent); }

.bd_w70{
	width: 70%;
	margin: 0 auto;
	min-width: 1100px;
}

.fz_12{ font-size: 12px; }
.lh_25{ line-height: 25px; }

.bd_ul{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
}

.flex_wp{
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	display: flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
}

.mg_t10{ margin-top: 10px; }
.mg_t50{ margin-top: 50px; }
.mg_btm10{ margin-bottom: 10px; }
.strong{ color:#000; }

/* ===== 顶部导航 ===== */
.header{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 50;
	background: var(--color-dark-header);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 2px 20px rgba(0,0,0,0.25);
	transition: background var(--transition-base);
}

.header .hd{
	width: 100%;
	height:60px;
	background: transparent;
}

.hd{ color:#fff; }

.hd .left_wp{
	display: table-cell;
	height:60px;
	overflow: hidden;
}

.hd .right_wp{ position: relative; }

.hd .left_wp img{ vertical-align:center; }

.logo{
	line-height:60px;
	height: 40px;
	width: auto;
	filter: brightness(0) invert(1);
}

/* ===== 导航链接 ===== */
.pg_wrap{
    height:60px;
	margin-right: 20px;
	line-height:60px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.nav_link{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	color: var(--color-text-muted);
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--radius-sm);
	transition: all var(--transition-fast);
	border-bottom: 2px solid transparent;
}

.nav_link:hover{
	color: var(--color-text-light);
	background: rgba(255,255,255,0.08);
	border-bottom-color: var(--color-accent);
	transform: translateY(-1px);
}

/* ===== 登录按钮 ===== */
.login{
    line-height: 60px;
    background: linear-gradient(135deg, var(--color-accent) 0%, #5a9b26 100%);
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0 0 0 var(--radius-md);
    transition: all var(--transition-fast);
    box-shadow: 0 2px 10px rgba(127, 187, 57, 0.4);
    border-left: 3px solid rgba(255,255,255,0.2);
}

.login:hover{
	background: linear-gradient(135deg, var(--color-accent-hover) 0%, #4e891f 100%);
	box-shadow: 0 4px 16px rgba(127, 187, 57, 0.5);
	transform: translateY(-1px);
}

/* ===== Banner / 标题区 ===== */
.banner{
	width: 100%;
	height: 560px;
	margin-top: 60px;
	position: relative;
}

.banner_title{
	font-size: 42px;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 22%;
	color: #ffffff;
	font-weight: 700;
	text-shadow: 0 2px 20px rgba(0,0,0,0.5), 0 0 60px rgba(43, 134, 212, 0.3);
	letter-spacing: 4px;
	animation: fadeInDown 0.9s ease-out;
}

@keyframes fadeInDown {
	from { opacity: 0; transform: translateY(-30px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ===== 搜索框 ===== */
.search_box{
	width: 720px;
	top: 42%;
	margin: 0 auto;
    position: absolute;
	left: 0;
	right: 0;
	animation: fadeInUp 0.9s ease-out;
}

@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}

.key_wp{
	width: 720px;
	height: 72px;
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius: var(--radius-lg);
	padding: 6px;
	clear:both;
	float:none;
	margin-bottom:16px;
	border: 1px solid rgba(255,255,255,0.25);
	box-shadow: var(--shadow-md);
	transition: box-shadow var(--transition-base);
}

.key_wp:hover{
	box-shadow: var(--shadow-lg);
}

.key_input_wp{
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: var(--radius-md);
	padding: 5px 5px 5px 50px;
	position: relative;
}

.search_icon{
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-primary);
	font-size: 22px;
	z-index: 2;
}

.key_input_wp input{
	width:100%;
	height: 100%;
	padding-left: 4px;
	border:0px;
	outline: none;
	font-size: 20px;
	color: var(--color-text);
	background: transparent;
}

.key_input_wp input::placeholder{
	color: #aaa;
}

/* ===== 验证码 ===== */
.yzm_wp{
	width: 300px;
	height: 56px;
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(14px);
	border-radius: var(--radius-lg);
	padding: 4px;
	clear:both;
	float:none;
	margin: 0 auto 16px auto;
	border: 1px solid rgba(255,255,255,0.25);
	box-shadow: var(--shadow-md);
}

.yzm_input{
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: var(--radius-md);
	padding: 4px;
	display: flex;
	align-items: center;
}

.yzm_input input{
	flex: 1;
	height: 100%;
	padding-left:14px;
	border:0px;
	outline: none;
	font-size: 16px;
	background: transparent;
}

.yzm_input img{
	width: 100px;
	height: 42px;
	cursor: pointer;
	border-radius: 4px;
}

.yzm_search_btn{
	width:100px; height:30px; text-align:center;color:#fff; float:right; border:none; cursor:pointer; border-radius:10px;margin-top:15px;
}

/* ===== 查询按钮 ===== */
.sy_search_btn{
	width:100%;
	height:60px;
	text-align:center;
	font-size:20px;
	font-weight:700;
	color:#fff;
	border:none;
	cursor:pointer;
	border-radius: var(--radius-lg);
	padding:10px;
	background: linear-gradient(135deg, var(--color-primary) 0%, #1e6fb5 50%, #2B86D4 100%);
	box-shadow: 0 6px 20px rgba(43, 134, 212, 0.45);
	letter-spacing: 2px;
	transition: all var(--transition-fast);
	position: relative;
	overflow: hidden;
}

.sy_search_btn::before{
	content: '';
	position: absolute;
	top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
	transition: left 0.6s ease;
}

.sy_search_btn:hover::before{
	left: 100%;
}

.sy_search_btn:hover,
.sy_search_btn:focus,
.sy_search_btn:active{
	background: linear-gradient(135deg, var(--color-primary-hover) 0%, #175a94 50%, var(--color-primary) 100%);
	box-shadow: 0 8px 28px rgba(43, 134, 212, 0.55);
	transform: translateY(-2px);
}

.sy_search_btn i{
	margin-right: 8px;
}

/* ===== 注册按钮(保留) ===== */
.reg_search_btn{
	width:580px;
	height:50px;
	text-align:center;
	font-size:24px;
	font-weight:bold;
	color:#fff;
	border:none;
	cursor:pointer;
	border-radius:10px;
	padding:10px;
	background-color: var(--color-primary);
}

.reg_search_btn:hover,.sy_search_btn:focus,.sy_search_btn:active,.sy_search_btn.active{
	background-color: var(--color-primary-hover);
}

/* ===== 提示文字 ===== */
.notices{
	width:100%;
	margin-top:16px;
	text-align: center;
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.8;
}

/* ===== 使用指南区域 ===== */
.bd_wrap{
	border-top:1px solid rgba(255,255,255,0.15);
	margin:50px 20px;
	border-bottom:1px solid rgba(255,255,255,0.15);
	padding:50px;
	background: rgba(255,255,255,0.08);
	border-radius: var(--radius-lg);
}

.title_wp{
	width: 50%;
}

.title_wp img{
	width: 5%;
}

.title_wp p{
	font-size: 20px;
	line-height: 40px;
	margin-left: 10px;
	color: #fff;
}

.msg_list .title_wp p{
	font-size: 20px;
	line-height: 20px;
	margin-left: 10px;
}

.first{
	width: 50px;
	height: 50px;
	background: var(--color-accent);
	border-radius: 3px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	padding: 5px;
	vertical-align: middle;
	margin-top: 45px;
	margin-right: 15px;
}

.wd_wrap{
	position: absolute;
    width: 66%;
    height: 100%;
    top: 0;
    right: 7.5%;
}

.tb_cell{ position: relative; }

.PC_wp,.MB_wp{
	position: relative;
	text-align: center;
	margin: auto;
	margin-top: 21%;
}

.PC_wp p,.MB_wp p{
	width: 24%;
	color: var(--color-accent);
	margin-left: 16%;
	font-size: 12px;
}

/* ===== 底部 ===== */
.footer{
	width: 100%;
	padding: 40px 0px 24px 0px;
	text-align: center;
}

.footer_links{
	margin-bottom: 16px;
	font-size: 14px;
}
.footer_links a{
	color: var(--color-text-muted);
	margin: 0 8px;
	transition: color var(--transition-fast);
}
.footer_links a:hover{
	color: var(--color-text-light);
	text-decoration: underline;
}

.footer p{
	color: var(--color-text-muted);
	line-height: 1.8;
	font-size: 13px;
}

.footer_small{
	font-size: 12px !important;
	opacity: 0.6;
}

/* ===== 保留兼容用 ===== */
.login_nav input{
	outline: none;
	width: 100%;
	padding: 5px;
}

.login_wp{
	position: fixed;
	right:0;
	top: 80px;
	left: 0;
	z-index: 10;
	transition: all 0.5s;
	display: none;
}

.login_nav{
	width: 200px;
	background: #fff;
	padding: 25px;
	position: absolute;
	right: 0;
	top: 0;
}

.index_pg,.user_pg{
	padding: 0px 30px;
}

.pg_wrap{
	height:60px;
	margin-right: 20px;
	line-height:60px;
}

.home{
	margin-bottom: -5px;
}

.goods_bd{
	width: 31%;
	margin: 10px 1.15%;
}

.goods_bd:hover{
	color:#ed1559;
    box-shadow: 1px 3px 8px #d9d9d9;
}

.goods{ position: relative; }

.goods .mask{
	background: rgba(255,255,255,0.7);
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	display: none;
}

.goods .mask img{
	width: 70px;
	height: 70px;
	margin-top: 30%;
	cursor:pointer;
}

.goods_bd:hover .mask{ display: block; }

.price{ color:#ed1559; }
.price .money_icon{ font-size: 16px; vertical-align: top; }
.price .price_num{ font-size: 25px; }

.goods_msg{
	padding:15px;
	border-bottom: 1px solid #d9d9d9;
}

.buy_btn{
	display: block;
	width: 45px;
	height: 45px;
	background: var(--color-accent);
	bottom: 0;
	right: 0;
	margin-bottom: -15px;
	margin-right: 20px;
	position: absolute;
	border-radius: 100%;
	text-align: center;
	line-height: 45px;
	color: #fff;
	cursor:pointer;
}
.buy_btn i{ font-size: 22px; }

.stars i{ color: #dcdcdc; }
.stars .star_lt{ color: rgb(255, 202, 40); }

.right_search select{
	width: 200px;
	padding: 5px 10px;
	vertical-align: bottom;
}
.right_search .search02{
	width: 35px;
	vertical-align: top;
}

.pages{
	position: relative;
    margin-top: 50px;
    text-align: center;
}
.pages i{ vertical-align: middle; }
.pages a{
	color:#333;
	border:1px solid #d9d9d9;
	padding:5px 15px;
}

.prev_btn:hover{
	background: var(--color-accent);
	color:#fff;
}
.next_btn:hover{
	background: var(--color-accent);
	color:#fff;
}

.right-area-le30 h1{
	font-weight: bold;
	font-size: 22px;
}
.cpxq-explain{ color:#666; }

.tt_icon{
	padding-right:15px;
	border-right:1px solid var(--color-accent);
}

.msg_bd{
	width: 92.5%;
	margin: 0 auto;
	border-top: 1px dashed rgba(255,255,255,0.2);
	border-bottom: 1px dashed rgba(255,255,255,0.2);
	padding: 20px 0px;
	margin-top: 20px;
}
.msg_bd p{ line-height: 30px; }