/* 公共样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
    text-align: center;
}

a {
    text-decoration: none;
    color: #000;
}
/* 头部盒子 */
.header-nav {
    height: 50px;
    background-color:#ffbf80;
    /* 给一级菜单边框空间和缩放空间各2px */
    padding: 4px 0;
    position: relative;
    z-index:2;
    display: flex;
    align-items: center;
}

.logo{
    height: 100px;
    margin-right: -110px;
}

/* 一级菜单 */
.nav-primary-ul {
    height: 100%;
    position: relative;
    left: 50%;
    margin-left: -250px;
    /* 块级元素，独占一行，移动后会超出范围 */
    display: inline-block;
}

.primary-ul-li {
    float: left;
    width: 100px;
    height: 100%;
    text-align: center;
    border: 1px solid transparent;
    /* 解决展开二级菜单时部分重叠 */
    margin: 0 2px;
    position: relative;
    list-style: none;
}

.clearFixed::after {
    content: "";
    display: block;
    clear: both;
}

.primary-ul-li a {
    line-height: 50px;
    color: whitesmoke;
}

.primary-ul-li:hover {
    border: 1px solid #f7af05;
    border-radius: 15px 5px;
    transform: scale(1.1, 1.1);
}

.primary-ul-li:hover a {
    color: #ff7e00;
}
/* 二级菜单 *//*
.nav-secondary-ul {
    background-color: #ffd8b3;
    padding: 0 3px;
    *//* display: none;鼠标撤离时立即消失，visibility过段时间消失 *//*
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all 2s;*//*想要过渡谁，就在谁身上加*//*
    *//* 解决ul的缝隙 *//*
    margin-top: -5px;
    position: absolute;
    width: 100%;
    z-index: 999;
}

.primary-ul-li:hover .nav-secondary-ul {
    *//* display: block; *//*
    visibility: visible;
    opacity: 1;
    height: 120px;
    *//* 解决ul缝隙 *//*
    margin-top: -8px;
}

.secondary-ul-li {
    line-height: 35px;
    color: whitesmoke;
    border: 1px solid transparent;
    list-style: none;
}

.secondary-ul-li:hover {
    border: 1px solid #f7af05;
    border-radius: 15px 5px;
    color: #f7af05;
}*/
/* 头部-右侧提示 */
.header-nav p{
    /* background-color: #f7af05; */
    position: absolute;
    height: 100%;
    right: 10px;
    top: 0;
    color: #f7af05;
}

/* 当一级菜单项被悬停时，显示二级菜单 */
.primary-ul-li:hover .nav-secondary-ul {
    visibility: visible;
    opacity: 1;
    height: 120px;
    margin-top: -8px;
}
.topnav {
  overflow: hidden;
  background-color: #373F43;
  margin-bottom:8px;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #2196F3;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 8px;
  margin-top: -4px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 8px;
  margin-top: -4px;
  background: #ffeee5;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: 	 #ff7e00;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}