.header_box {
  width: 100%;
height: calc(20px + 4rem);


  .header {
    max-width: 1710px;
    width: 90%;
    float: right;
    display: flex;
    justify-content: flex-start;
    align-items: center;


    .header_logo {
      padding-top: calc(2px + 0.25rem);
      padding-bottom: calc(3px + 0.25rem);
      width: calc(74px + 10rem);

      img {
        width: 100%;
      }
    }

    .header_nav {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: calc(2px + 1.5rem);
      margin-left: calc(2px + 4rem);



      .header_nav_item {
        line-height: calc(18px + 4rem);
        padding: 0 calc(5px + 0.5rem);

        a {
          font-family: Inter_Medium;
          font-weight: 500;
          font-size: calc(8px + 0.5rem);
          color: #333333;

        }
      }

      .header_active {
        border-top: calc(0px + 0.1rem) #104D8C solid;

        a {
          color: #104D8C;
        }
      }
    }

    .language {
      width: calc(4px + 1rem);
      margin-left: calc(19px + 5rem);
      cursor: pointer;
      position: relative;

      img {
        width: 100%;
      }

      .lang_box {
        display: none;
        background-color: #fff;
        width: calc(20px + 3rem);
        transition: .5s;
        position: absolute;
        top: 100%;
        right: 50%;
        transform: translate(50%);
        z-index: 10;
        box-shadow: 0 10px 10px #00000020;

        p {
          text-align: center;
          font-size: calc(6px + 0.5rem);
          color: #333;
          line-height: calc(10px + 1rem);
        }
        p:hover{
          color: #104D8C;
        }
      }
    }

    .language:hover {
      .lang_box {
        display: block;
      }
    }

    .search {
      cursor: pointer;
      width: calc(4px + 1rem);
      margin-left: calc(10px + 1.5rem);
      margin-right: calc(14px + 2rem);
      height: calc(20px + 4rem);
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }

    .order {
      flex: 1;
      height: calc(20px + 4rem);
      background: #104D8C;
      border-radius: 0px 0px 0px 0px;

      a {
        width: 100%;
        height: 100%;
        font-family: Inter_Medium;
        font-weight: 500;
        font-size: calc(8px + 0.5rem);
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.pro_xiala {
  width: 100%;
  padding: calc(8px + 0.5rem) 0;
  background-color: #fff;
  display: none;
  position: absolute;
  top: calc(20px + 4rem);
  z-index: 100;
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);

  .pro_xiala_nav_box {
    width: 100%;
    padding-left: 36%;
    display: flex;
    justify-content: flex-start;
    gap: calc(8px + 5rem);

    .pro_xiala_nav {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: calc(5px + 0.5rem);

      .pro_xiala_nav_item {
        font-family: Inter_Regular;
        font-weight: 400;
        font-size: calc(6px + 0.5rem);
        color: #666666;
        line-height: calc(4px + 1rem);
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .pro_xiala_nav_item:hover {
        color: #104D8C;
      }
    }

    .pro_xiala_right {
      width: calc(181px + 30rem);
      display: none;

      .pro_xiala_typename {
        font-family: Inter_Regular;
        font-weight: 400;
        font-size: calc(6px + 0.5rem);
        color: #104D8C;
        line-height: calc(4px + 1rem);
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .pro_xiala_line {
        width: 100%;

        margin-top: calc(5px + 0.5rem);
        border-bottom: 1px dashed #999999;
      }

      .pro_xiala_type_pro {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: calc(5px + 1rem);

        .pro_xiala_type_pro_item {
          width: 30.7298%;
          cursor: pointer;

          .pro_xiala_type_pro_item_pic {
            width: 100%;
            height: calc(95px + 5rem);

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          p {
            font-family: Inter_Medium;
            font-weight: 500;
            font-size: calc(6px + 0.5rem);
            color: #333333;
            line-height: calc(10px + 0.5rem);
            text-align: center;
            font-style: normal;
            text-transform: none;
            margin-top: calc(4px + 0.5rem);
          }
        }

        .pro_xiala_type_pro_item:hover {
          p {
            color: #104D8C;
          }
        }
      }
    }

    .pro_xiala_right:nth-of-type(2) {
      display: block;
    }
  }
}

.search_box {
  width: 100%;
  height: calc(5px + 10rem);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0px 0px 0px 0px;
  position: absolute;
  top: calc(20px + 4rem);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;

  .search1 {
    width: calc(17px + 50rem);
    height: calc(14px + 2rem);
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(1px + 1rem);

    .search_icon {
      width: calc(4px + 1rem);
    }

    .search_input {
      width: 95%;

      input {
        width: 100%;
        height: 100%;
        background-color: #fff;
        outline: medium;
        border: none;
        font-family: Inter_Regular;
        font-weight: 400;
        font-size: calc(6px + 0.5rem);
        color: #999999;

      }
    }
  }
}

 .banner_btn_item {
            width: calc(30px + 5rem);
            height: calc(10px + 1.5rem);
            background: #104D8C;
            border-radius: 0px 0px 0px 0px;

            font-family: Inter_Regular;
            font-weight: 400;
            font-size: calc(6px + 0.5rem);
            color: #FFFFFF;

            a {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

@media (min-width: 800px) and (max-width: 1600px) {
  .header_box {
    .header {
      .header_nav {
        .header_nav_item {

          padding: 0 calc(-4px + 0.5rem);
        }
      }
    }
  }
}