/* 首页、搜索页等页面的头部和导航栏是一样的内容，可以直接引用以下样式 */
/* 字体图标声明 */
@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon.eot?xcumm0");
  src: url("../fonts/icomoon.eot?xcumm0#iefix") format("embedded-opentype"),
    url("../fonts/icomoon.ttf?xcumm0") format("truetype"),
    url("../fonts/icomoon.woff?xcumm0") format("woff"),
    url("../fonts/icomoon.svg?xcumm0#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

body {
  padding-top: 35px;
  /* 这个值应该等于导航栏的高度，可以使得导航栏固定之后，背景图片上方空间不变 */
}

/* w为版心的设置，如果后续有盒子在版心位置，直接调用.w */
.w {
  width: 1275px;
  margin: auto;
}

/* 设置页面背景色 */
/* .gradientcolor {
    height: 190px;
    width: 100%;
    background: linear-gradient(to bottom, #af9670, #ffffff);
} */

/* 导航栏设置  需要浮动*/
.logo {
  width: 200px;
  /* margin-left: 70px; */
  float: left;
}

.menu {
  height: 60px;
  background-color: #b3a488;
  /* 行高会继承，给menu加line-height就可以实现里面所有子盒子内容的垂直居中 */
  line-height: 60px;
  /* text-align: center可以使其内部的子元素ul水平居中 */
  text-align: right;
  /* 要用相对定位，占用位置 */
  position: fixed;
  /* 固定在页面 */
  top: 0;
  /* 贴紧页面顶部 */
  left: 0;
  /* 贴紧页面左侧 */
  width: 100%;
  /* 宽度为100% */
  z-index: 99999;
}

.menu ul {
  /* 要想水平居中得转换为行内块元素 */
  display: inline-block;
  /* 新添加 */
  padding: 0;
  /* margin: 0; */
  margin-right: 20px;
}

.menu ul li {
  /* 加浮动使导航栏一行显示 */
  float: left;
  /* 不要给li宽度，因为里面内容字数不一样多 */
  /* 新添加 */
  position: relative;
}

.menu ul li a {
  display: block;
  color: #000000;
  font-size: 18px;
  /* 给a一个padding值，使之范围变大，这样子点击这个范围内都可以是链接 */
  padding: 0 17px;
  text-decoration: none;
}

.menu ul li a::before {
  content: "\e900";
  font-family: "icomoon";
  margin-right: 8px;
  /* 增加右边距使图标与文字之间有间距 */
}

.menu ul li#tools-menu > a::before {
  content: "\e900";
  /* 初始状态为向右箭头 */
}

.menu ul li#tools-menu:hover > a::before {
  content: "\e90b";
  /* 悬停状态为向下箭头 */
}

.menu ul li a:hover {
  color: #bd4812;
}

/* 下拉菜单部分 */
.menu ul li ul {
  display: none;
  position: absolute;
  top: 50px;
  left: 8px;
  background-color: #b3a488;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1000;
  text-align: left;
  /* 使下拉菜单项左对齐 */
  width: 230px;
}

.menu ul li ul li {
  float: none;
}

.menu ul li ul li a {
  padding: 1px 20px;
  color: #000;
  white-space: nowrap;
}

.menu ul li ul li a:hover {
  background-color: #f0f0f0;
  color: #bd4812;
}

.menu ul li:hover ul {
  display: block;
}

/* 头部模块 */

.wb-icon {
  width: 20px;
  height: 20px;
}

.sort-icon {
  position: relative;
  display: inline-block;
}

.sort-icon {
  width: 12px;
  height: 22px;
  transform: translateY(7px) translateX(4px);
}

.sort-asc {
  /* 鼠标悬浮时显示选中状态的升序图标 */
  display: block;
  background-image: url("./fonts/sort_asc_selected.svg");
  width: 10px;
  height: 12px;
  cursor: pointer;
}

.sort-desc {
  /* 鼠标悬浮时显示选中状态的降序图标 */
  display: block;
  background-image: url("./fonts/sort_desc_selected.svg");
  width: 10px;
  height: 12px;
  margin-top: -3px;
  cursor: pointer;
}