/* *全局样式设置 */
@font-face {
  font-family: cIconfont;
  src: url("https://pss.bdstatic.com/static/superman/font/iconfont-cdfecb8456.eot");
  src: url("https://pss.bdstatic.com/static/superman/font/iconfont-cdfecb8456.eot?#iefix")
      format("embedded-opentype"),
    url("https://pss.bdstatic.com/static/superman/font/iconfont-fa013548a9.woff2")
      format("woff2"),
    url("https://pss.bdstatic.com/static/superman/font/iconfont-840387fb42.woff")
      format("woff"),
    url("https://pss.bdstatic.com/static/superman/font/iconfont-4530e108b6.ttf")
      format("truetype"),
    url("https://pss.bdstatic.com/static/superman/font/iconfont-74fcdd51ab.svg#iconfont")
      format("svg");
}

body,
html {
  margin: 0; /* 去除默认的margin */
  padding: 0; /* 去除默认的padding */
  position: relative; /* 确保 body 容器具有相对定位 */
}

/* *导航栏部分 */

nav {
  display: flex;
  min-width: 660px;
  justify-content: space-between;
  box-sizing: border-box;
  /* background-color: #f2f2f2; */
}

nav a {
  text-decoration: none;
  font: 13px/23px Arial, sans-serif;
  
}

nav a:hover {
  color: blue;
}

/* 左导航栏 */
.nav-left {
  display: flex;
  margin-top: 16px;
  padding-inline-start: 24px; /* 左边距 */
}

.nav-left li {
  margin-right: 24px;
  text-decoration: none;
  list-style-type: none; /* 去除圆点 */
  color: #333;
}

.nav-left a {
  color: #000;
}


/* 更多菜单 */
.more-btn {
  position: relative;
}

.more-btn:hover .more-menu {
  display: block;
}

.more-menu {
  display: none;
  position: absolute;
  top: 28px;
  right: -12px;
  width: 226px;
  height: 298px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,.15);
  border-radius: 12px;
  z-index: 99;
  box-sizing: border-box;
}

.more-obj {
  /* border: 1px solid #000; */  /* !边框预览 */
  float: left;
  width: 60px;
  height: 82px;
  margin-left: 5px;
  margin-right: 5px;
  box-sizing: border-box;
}

.more-img img{

  width: 42px;
  height: 42px;
  margin-top: 8px;
  margin-left: 8px;
  margin-right: 8px;
  border: 1px solid rgba(0, 0, 0, .03);
  border-radius: 8px;
  box-sizing: border-box;
}

.more-text {
  text-align: center;
}

.more-all {
  position: absolute;
  bottom: 8px;
  margin-left: 4px;
  margin-right: 4px;
  box-sizing: border-box;
}

.more-all a {
  width: 200px;
  height: 24px;
  text-align: center;
  /* border: 1px solid #000; */  /* !边框预览 */
  display: inline-block;
}

.more-obj:hover,
.more-all:hover {
  border-radius: 8px;
  background-color: #F1F3FD;
}

/* 右导航栏 */
.nav-right {
  display: flex;
  margin-left: auto;
  align-items: center;
}

.nav-right li {
  margin-right: 20px;
  text-decoration: none;
  list-style-type: none; /* 去除圆点 */
}

.setting-btn {
  position: relative;
  color: #333;
  border-radius: 5px;
  padding: 5px;
}

.setting-menu {
  color: #000;
  background-color: #f9f9f9;
  display: none;
  position: absolute;
  top: 50px;
  right: 50px;
  min-width: 6px;
  box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.2);
  padding: 12px;
  border-radius: 5px;
  z-index: 999;
}

/* TODO自动弹出列表不工作, 修复中 */
.setting-btn-li:hover .setting-menu {
  display: block !important;
}

.login-btn {
  background-color: #4e6ef2;
  color: #ffffff;
  border-radius: 5px;
  height: 24px;
  width: 45px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.login-btn:hover {
  color: #ffffff;
  background-color: #315efb;
}

/* *主页面部分 */

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*   border: 1px solid #000;  */ /* !边框预览 */
  margin: 0 auto;
  width: 660px;
  height: calc(100vh - 90px); /* 设置容器的高度为整个视口的高度 */
}

.logo img {
  box-sizing: border-box;
  display: block;
  width: 270px;
  margin-bottom: 15px;
  /* border: 1px solid #000; */ 
}

.search-box {
  /*border: 1px solid #000; /* /* !边框预览 */
  width: calc(100% - 20px);
}

.input-ctrl {
  display: flex;
  justify-content: space-between; /* 将元素分别对齐到容器的左右两端 */
}

.input-and-cam {
  display: flex;
  position: relative; /* 添加相对定位，以便设置子元素的定位 */
  align-items: center;
  flex-direction: row;
}

.cam-btn {
  box-sizing: border-box;
  position: absolute; /* 添加绝对定位，以便进行绝对定位 */
  z-index: 2;
  width: 24px;
  height: 24px;
  object-fit: cover;
  object-position: 0px -47px;
  top: 50%; /* 相对于父元素垂直居中 */
  left: 95%; /* 相对于父元素水平居中 */
  transform: translate(-50%, -50%); /* 通过transform进行微调居中位置 */
  /*border: 1px solid #000; */ /* !边框预览 */
}

.cam-btn:hover {
  object-position: 0px -71px;
}

.input-box {
  box-sizing: border-box;
  z-index: 1;
  font-size: 16px;
  height: 42px;
  padding: 14px;
  width: 535px;
  border: 2px solid #b6b6b6; /* 细边框 */
  border-radius: 10px 0 0 10px;
}

.input-box:hover {
  border: 2px solid #8b8b8b; /* 细边框 */
}

.input-box:focus {
  outline-style: none;
  border: 2px solid #4e6ef2;
}

.search-btn {
  z-index: 1;
  box-sizing: border-box;
  height: 42px;
  width: 400px;
  margin-left: -3px;
  font-size: 16px;
  color: #ffffff;
  background-color: #4e6ef2;
  border: 1px solid #4e6ef2; /* 细边框 */
  border-radius: 0 10px 10px 0;
}

.search-btn:hover {
  background-color: #4662d9;
}

/* *热搜部分 */

.hot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 将元素分别对齐到容器的左右两端 */
  flex-direction: row;
  margin-top: 45px;
  margin-bottom: -8px;
  font-size: 14px;
  /*border: 1px solid #000; /* 为了更好地可视化效果 */
  font-family: cIconfont;
}

.hot-btn {
  text-decoration: none;
  color: #000000;
}

.hot-btn:hover {
  color: #315efb;
}

.hot-arrow {
  margin-left: -3px;
  color: #9195a3;
}

.refresh-ctrl {
  color: #4e4e4e;
}

.refresh-btn {
  display: inline-block;
  transition: transform 1s;
}

.rotate {
  transform: rotate(360deg);
}

/* *热搜列表 */

.hot-list {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  column-count: 2;
  list-style-type: none; /* 去除圆点 */
  padding: 0; /* 去除默认的内部缩进 */
}

.hot-list li {
  display: flex;
  flex-direction: row;
  text-align: center;

  box-sizing: border-box;
  font-family: Arial, sans-serif;

  padding: 0px;
  /* border: 1px solid #000;*/ /* !边框预览 */
  height: 36px;
}

.hot-list a {
  color: #000;
  text-decoration: none;
}

.hot-list :hover {
  text-decoration: underline; /* 添加下划线 */
  color: #315efb;
}

[class^="hot-num-"] {
  display: inline-block;
  text-align: center;
  width: 16px;
  margin-right: 5px;
  color: #9195a3;
  font-family: cIconfont;
}

.hot-num-0 {
  transform: rotate(180deg);
  color: #f63051;
}

.hot-num-1 {
  color: #fe2d46;
}

.hot-num-2 {
  color: #ff6618;
}

.hot-num-3 {
  color: #faa90e;
}

[class^="hot-hot-"] {
  display: inline-block;
  transform: scale(0.8); /* 可以根据需要调整缩放比例 */
  transform-origin: center;

  color: #ffffff;
  background-color: #ff6600;
  padding: 0 2px;
  border-radius: 4px;
  font-weight: 200;
}

.assist-and-qrcode {
  position: absolute; /* 使用绝对定位 */
  bottom: 62px; /* 与底部的距离 */
  right: 24px; /* 与右侧的距离 */
  height: 88px;
  width: 44px;

  border-radius: 50px;
  background-color: #f0f0f0;
  box-shadow: 0px 2px 50px #7f7f7f33; /* 添加阴影效果 */

  box-sizing: border-box;
  margin-bottom: auto;
  margin-left: auto;
  flex-direction: column;
  /* border: 1px solid #000; */ /* !边框预览 */
}

.assist {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;

  border-radius: 50px;

  box-sizing: border-box;
  /*   border: 1px solid #000; */ /* !边框预览 */
}

.assist:hover {
  box-shadow: 0px 2px 10px #7f7f7f33;
}

.assist-icon {
  transform: scale(0.75);
}

.qr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50px;

  box-sizing: border-box;
  background-image: url(https://pss.bdstatic.com/static/superman/img/qrcode/qrcode@2x-daf987ad02.png);
  background-size: 74%;
  background-position: center; /* 居中显示背景图片 */
  /*   border: 1px solid #000; */ /* !边框预览 */
}

.qr-icon {
  transform: scale(0.8);
}

.qr:hover {
  background-image: url(https://pss.bdstatic.com/static/superman/img/qrcode/qrcode-hover@2x-f9b106a848.png);
  box-shadow: 0px 2px 10px #7f7f7f33;
}

/* *底栏部分 */

footer {
  text-align: center;
  font-family: cIconfont;
  bottom: 0;
}

footer a {
  text-decoration: none;
  color: #a3a3a3;
  font-size: 12px;
  padding: 5px; /*左右间隔*/
}

footer a:hover {
  color: #000000;
}