.header_box {
  width: 100%;
  position: relative;
}

.header {
  max-width: 1440px;
  width: 85%;
  margin: auto;
  /* padding: calc(5px + 0.5rem) 0; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: calc(7px + 15rem);
  position: relative;
}

.header_logo {
  width: calc(16px + 3rem);
}

.header_logo img {
  width: 100%;
}

.header_nav {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(10px + 2rem);
}

.header_nav_item {
  line-height: calc(20px + 4rem);
  font-family: Robotp_Regular;
  font-weight: 400;
  font-size: calc(8px + 0.5rem);
  color: #333333;
  transition: .3s;
}

.header_nav_item:hover {
  color: #F08D16;
}

.search {
  width: calc(20px + 3rem);
  /* border: 1px black solid; */
  font-family: Robotp_Regular;
  font-weight: 400;
  font-size: calc(8px + 0.5rem);
  color: #333333;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(3px + 0.25rem);
  transition: .5s;
  position: absolute;
  right: 0;
  cursor: pointer;


}

.search input {
  width: calc(17px + 2rem);
  border: none;
  border-bottom: 1px #999999 solid;
  transition: .5s;
  outline: medium;
}
.search:hover{
  width: calc(20px + 10rem);
}

.search:hover input {
  width: calc(20px + 10rem);
  padding: calc(5px + 0.25rem);
  padding-left: calc(5px + 1rem);
}

.search button {
  transition: .5s;
}

.search:hover button {
  position: absolute;
  left: 0;
}


.search .espcms_search_icon{
  width: calc(6px + 0.5rem) !important;
  border: none;
  background-color: transparent;
}



.search img {
  width: calc(6px + 0.5rem);
  cursor: pointer;
}

.header_nav .header_active {
  color: #F08D16;
}

.second_box {
  width: 100%;
  height: 0;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 100%;
  z-index: 10;
  overflow: hidden;
  transition: .3s;
}

.second_box2 {
  width: 100%;
  height: 0;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 100%;
  z-index: 10;
  overflow: hidden;
  transition: .3s;
}

.second_box3 {
  width: 100%;
  height: 0;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 100%;
  z-index: 10;
  overflow: hidden;
  transition: .3s;
}

.riht_jt{
  width: calc(10px + 0.25rem);
  margin-top: calc(0px + 0.38rem);
}

.second {
  width: 100%;
  background: #F7F7F7;
  padding-top: calc(5px + 1.5rem);
  padding-bottom: calc(16px + 3rem);
}

.second_con {
  max-width: 1440px;
  width: 80%;
  margin: auto;
}

.second_con_title {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.discover {
  font-family: Robotp_Regular;
  font-weight: 400;
  font-size: calc(8px + 0.5rem);
  color: #777777;

}

.second_card_box {
  display: flex;
  justify-content: flex-start;
  gap: calc(10px + 0.5rem);
  margin-top: calc(6px + 0.5rem);
}

.second_card {
  width: 23.9583%;
  height: calc(64px + 20rem);
  position: relative;
  overflow: hidden;
}

.second_card .second_pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}

.second_card img:hover {
  transform: scale(1.1);
}

.second_card p {

  font-family: Robotp_Regular;
  font-weight: 400;
  font-size: calc(10px + 0.5rem);
  color: #FFFFFF;
  position: absolute;
  bottom: calc(4px + 1rem);
  left: calc(5px + 1.5rem);
}

.prev_next {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(2px + 1rem);
}

.prev_next p {
  font-family: '黑体';
  font-size: calc(14px + 0.5rem);
  cursor: pointer;
  color: #000000;
}

.prev_next p:nth-of-type(1) {
  color: #888888;
}

.pro_xiala_card_box {
  width: 100%;
  margin-top: calc(6px + 0.5rem);
}

.pro_xiala_card_box .mySwiper2 {
  width: 100%;
  overflow: hidden;
}

.pro_xiala_card_box .mySwiper2 .swiper-slide {
  width: 21.3194%;

}

.pro_xiala_card {
  width: 100%;
  height: calc(94px + 5rem);
  background: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;

}

.pro_xiala_card img {
  height: calc(40px + 5rem);
  transition: .5s;
}

.pro_xiala_card:hover img {
  transform: scale(1.1);
}

.pro_xiala_name {
  font-family: Robotp_Regular;
  font-weight: 400;
  font-size: calc(10px + 0.5rem);
  color: #333333;
  text-align: center;
  margin-top: calc(6px + 0.5rem);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(1px + 0.25rem);
}

.pro_xiala_name img {
  width: calc(10px + 0.25rem);
}