.download-box{
  flex:none;
  display:flex;
  align-items:center;
  margin-left:39px;
  position:relative;
  cursor:pointer;
}
.download-img{
  width:26px;
  flex:none;
}
.download-text{
  color:var(--login-box-text-font-color);
  margin-left:6px;
}
.download-qrcode-box{
  padding:10px;
  box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
  transition:0.5s;
  z-index:-10;
  opacity:0;
  transform:scaleY(0) translateX(-50%);
  position:absolute;
  left:50%;
  top:100%;
  background-color:#ffffff;
  transform-origin:50% 0;
}
.download-qrcode{
  width:180px;
  z-index:10;
}
.download-box:hover .download-qrcode-box{
  z-index:99;
  opacity:1;
  transform:scaleY(1) translateX(-50%);
}
.date-box{
  font-size: 50px;
  display: flex;
  align-items: flex-end;
  color:#ffffff;
  flex:none;
  margin-left:31px;
}
.t-box{
  position: relative;
  font-weight: 900;
  /*line-height: 40px;*/
  font-family:SourceSerif4-Black;
}
.logo-link{
  display:block;
}
.line-box{
  /*right: 72%;*/
  /*top: 12px;*/
  /*position: absolute;*/
  /*transform: translateY(-50%);*/
  font-size: 66px;
  margin-right: -5px;
  display: inline-block;
  box-sizing: border-box;
  transform: translateY(-13%);
  font-weight: lighter;
}
.n-box{
  /*right: 110%;*/
  /*bottom: 100%;*/
  /*transform: translateY(50%);*/
  /*position: absolute;*/
  margin-right: -5px;
  transform: translateY(-60%);
  font-weight: 900;
  font-family:SourceSerif4-Black;
}
.Wed-box{
  /*position: absolute;*/
  /*right: 143%;*/
  font-size: 14px;
  font-weight: 900;
  /*bottom: 8px;*/
  transform: translateY(-72%);
}
.head-top{
  position:relative;
  z-index:299;
  background-color:var(--head-top-bg-color);
}
.head-top-1{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:5px 0 5px 0;
}
.head-top-1-box{
  position:relative;
  z-index:99;
}
.search-box{
  width:calc( 717 / 1233 * 100% );
  height:26px;
  border-radius:26px;
  background: rgba(222, 222, 222, 1);
  cursor:pointer;
  padding-left:8px;
  flex:none;
  display:flex;
  align-items:center;
}
.search-box-icon{
  width:18px;
  flex:none;
}
.head-top-1-right{
  display:flex;
  align-items:center;
  flex:none;
  margin-left:20px;
}
.login-box{
  display:flex;
  align-items:center;
  flex:none;
}
.login-box-icon-link{
  width:14px;
  flex:none;
}
.login-box-icon{
  width:100%;
}
.login-box-text{
  font-size: 16px;
  font-weight: 900;
  color:var(--login-box-text-font-color);
  margin-left:7px;
}
.HK-link{
  height:26px;
  line-height:26px;
  border-radius: 4px;
  background: var(--HK-link-bg-color);
  box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
  color:#ffffff;
  padding:0 11px;
  margin-left:35px;
}
.head-top-2{
  background-image:var(--head-top-2-bg-image);
  background-size: 501px auto,100% 100%;
  background-repeat: no-repeat,no-repeat;
  background-position:center right -150px,0 0;
  position:relative;
  z-index:10;
}
.head-top-2-inner{
  display:flex;
  justify-content:space-between;
  /*padding-left:calc( 106 / 1233 * 100% );*/
  /*padding-right:calc( 122 / 1233 * 100% );*/
  align-items:center;
}
.logo-box{
  flex:none;
}
.logo-link{
  width:159px
}
.logo-icon{
  width:100%;
}
.logo-text{
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 1);
}
.head-top-2-right{
  display:flex;
  align-items:center;
  padding-top:33px;
  padding-bottom:4px;
  flex:none;
}
.user-img-box{
  width:35px;
  border-radius:50%;
  height:35px;
  overflow:hidden;
  border: 2px solid rgba(214, 214, 214, 1);
  cursor:pointer;
}
.user-img{
  width:100%;
  height:100%;
}
.span-icon{
  position:relative;
}
.login-center{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) scaleY(0);
  transform-origin:50% 0;
  box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
  background-color:var(--login-center-bg-color);
  opacity:0;
  z-index:-10;
  transition:0.5s;
}
.login-user{
  display:none;
}
.login-user:hover .login-center{
  z-index:99;
  opacity:1;
  transform:translateX(-50%) scaleY(1);
}
.login-center-name,.login-center-list>a{
  padding-left:30px;
  padding-right:30px;
  padding-top:15px;
  padding-bottom:15px;
  white-space: nowrap;
  text-align:center;
}
.login-center-name{
  font-weight: 900;
  font-family:SourceSerif4-Black;
}
.login-center-list>a{
  display:block;
  background: var(--login-center-bg-color);
  color:var(--font-color);
  transition:0.5s;
}
.login-center-list>a:hover{
  background: rgba(81, 114, 140, 1);
  color:#ffffff;
}
@media (max-width:1099px){
  .date-box{
    margin-left: 14px;
  }
  .HK-link,.download-box{
    margin-left: 15px;
  }
  .download-qrcode{
    width: 154px;
  }
  .download-qrcode-box{
    padding:5px;
  }
}
@media (max-width:767px){
  .head-top-1{
    padding: 5px 0 5px 0;
  }
  .head-top-1-right{
    margin-left:4vw;
  }
  .HK-link,.download-box{
    margin-left: 3vw;
  }
  .HK-link{
    font-size:3vw;
  }
  .login-box-text{
    font-size:3vw;
  }
  .download-img{
    width:5vw;
  }
  .download-text{
    font-size: 3vw;
    margin-left: 1vw;
  }
  .download-qrcode{
    width:26vw;
  }
  .download-qrcode-box{
    padding:1vw;
    transform: scaleY(0);
    left: unset;
    right: 0;
  }
  .download-box:hover .download-qrcode-box{
    transform: scaleY(1);
  }
  .search-box{
    width: 37vw;
  }
  .head-top-2-inner{
    padding-left: 0;
    padding-right: 0;
  }
  .logo-text{
    font-size: 3.75vw;
  }
  .head-top-2-right{
    display: block;
  }
  .date-box{
    margin-left:0;
    margin-top:4vw;
    font-size: 6vw;
    justify-content: flex-end;
  }
  .line-box{
    font-size: 8vw;
  }
  .Wed-box{
    transform: translateY(-24%);
  }
  .head-top-2-right{
    padding-top: 10vw;
  }
  .login-center-name, .login-center-list>a{
    padding-left:3vw;
    padding-right:3vw;
  }
}