.header-frame {
  background: #0a1443;
  /* border: 1px solid #979797; */
  height: 32px;
  width: 100%;
  position: relative;
}

.header-frame .update {
  color: #fff;
  height: 25px;
  /* border: 1px solid #ff0000; */
  text-align: right;
  margin: auto 0;
  position: relative;

  top: 5px;
  display: flex;
  align-items: center;
  margin-right: 15px;
  font-size: 15px;
}

.header-frame .update::before {
  content: "";
  background: url(../images/badge.svg) no-repeat;
  width: 20px;
  height: 20px;
  background-position: center;
  margin-right: 5px;
}

.header-frame .top-frame {
  width: 100%;
  background: #fff;
  height: 5px;
  position: absolute;
  top: -5px;
}

.header-frame .bottom-frame {
  width: 100%;
  background: #fff;
  height: 5px;
  position: absolute;
  bottom: -5px;
}

.header-frame .frame1 {  
  background-color: var(--bg-color);
  float: left;
  height: 5px;
}

.header-frame .frame2 {
  background-color: var(--bg-color);
  height: 5px;
  float: left;
}

.header-frame .frame3 {  
  background-color: var(--bg-color);
  float: left;
  height: 5px;
}

.header-frame .frame1.three, .header-frame .frame3.three{
  width: 33%;
}
.header-frame .frame2.three{
  width: 34%;
}
.header-frame .frame1.two, .header-frame .frame2.two{
  width: 50%;
}


@media screen and (min-width: 320px) and (max-width: 767px) {
  .header-frame {
    margin-top: 5px;
    /* margin-bottom: 10px; */
  }

  .header-frame .update {
    justify-content: flex-start;
    font-size: 14px;
  }
}