:host {
  display: block; width: 100%; box-sizing: border-box; --header-page-max-width: 1400px; --header-page-outer-padding: 0px 20px; --header-page-inner-padding: 20px 0px; --header-height: 80px; --header-background: #fff; --header-border-top: #005f9b 2px solid; --header-border-bottom: #eee 1px solid; --header-sticky-background: #fff; --header-sticky-logo-filter: none; --header-sticky-anchor-color: var(--header-anchor-color); --header-sticky-navicon-color: var(--header-navicon-color); --header-sticky-box-shadow: 0px 2px 2px rgb(0 0 0 / 5%); --header-logo-width: 25%; --header-logo-filter: none; --header-anchor-font-size: 14px; --header-anchor-font-weight: bold; --header-anchor-color: #005f9b; --header-anchor-hover-color: #333; --header-navicon-color: #005f9b; --header-mobile-anchor-font-size: 20px; ; --header-mobile-anchor-color: #fff; --header-mobile-mainmenu-background: rgba(0, 95, 155, .95); --z-index: 1000
}
.container {
  display: block !important; box-sizing: border-box; width: 100%; height: var(--header-height); padding: var(--page-outer-padding, var(--header-page-outer-padding)); background: var(--header-background); border-top: var(--header-border-top); border-bottom: var(--header-border-bottom); position: fixed; top: 0px; left: 0px; z-index: var(--z-index); transition: background-color .3s ease
}
.container div.box {
  display: flex; box-sizing: border-box; width: 100%; max-width: var(--page-max-width, var(--header-page-max-width)); height: 100%; margin: auto; padding: var(--page-inner-padding, var(--header-page-inner-padding)); align-items: center; justify-content: space-between
}
.container div.box logo {
  display: block; width: var(--header-logo-width); height: 100%; filter: var(--header-logo-filter)
}
.container div.box logo a {
  display: inline-block; height: 100%
}
.container div.box logo img {
  display: inline-block; height: 100%
}
.container div.box navicon {
  display: none
}
.container div.box mainmenu {
  display: block; flex: 1; height: 100%
}
.container div.box mainmenu ul {
  display: flex; justify-content: space-between; list-style: none; margin: 0px; padding: 0px; height: 100%
}
.container div.box mainmenu ul li {
  margin: 0px; padding: 0px; height: 100%
}
.container div.box mainmenu ul li a {
  display: flex; height: 100%; align-items: center; font-size: var(--header-anchor-font-size); font-weight: var(--header-anchor-font-weight); text-decoration: none; color: var(--header-anchor-color); position: relative; transition: color .2s ease
}
.container div.box mainmenu ul li a::before,
.container div.box mainmenu ul li a::after {
  content: ''; position: absolute; width: 0%; bottom: 0px; height: 2px; background: var(--header-anchor-hover-color); transition: width .2s ease, background .2s ease
}
.container div.box mainmenu ul li a::before {
  left: 50%
}
.container div.box mainmenu ul li a::after {
  right: 50%
}
.container div.box mainmenu ul li a:hover {
  color: var(--header-anchor-hover-color) !important
}
.container div.box mainmenu ul li a:hover::before,
.container div.box mainmenu ul li a:hover::after {
  width: 50%; background: var(--header-anchor-hover-color) !important
}
.container div.box mainmenu ul li.on a::before,
.container div.box mainmenu ul li.on a::after {
  width: 50%; background: var(--header-anchor-color)
}
.container.sticky {
  background: var(--header-sticky-background); box-shadow: var(--header-sticky-box-shadow); --header-logo-filter: var(--header-sticky-logo-filter); --header-anchor-color: var(--header-sticky-anchor-color); --header-navicon-color: var(--header-sticky-navicon-color)
}
.placeholder {
  width: 100%; height: var(--header-height); box-sizing: border-box
}
@media screen and (max-width: 960px) {
  :host {
    --header-page-outer-padding: 0px 15px; --header-page-inner-padding: 15px 0px; --header-height: 60px
  }
  .container div.box navicon {
    display: block; width: 30px; height: 30px; position: relative; z-index: 100; cursor: pointer
  }
  .container div.box navicon span {
    display: block; width: 100%; height: 2px; background: var(--header-navicon-color); margin-top: -1px; border-radius: 2px; position: absolute; top: 50%; z-index: 100; transition: all .2s ease
  }
  .container div.box navicon span::before,
  .container div.box navicon span::after {
    content: ''; display: block; width: 100%; height: 2px; background: var(--header-navicon-color); border-radius: 2px; position: absolute; top: 50%; z-index: 100; transition: all .2s ease
  }
  .container div.box navicon span::before {
    margin-top: -10px
  }
  .container div.box navicon span::after {
    margin-top: 8px
  }
  .container div.box navicon.on span {
    background: transparent
  }
  .container div.box navicon.on span::before {
    transform: rotate(45deg); margin-top: -2px
  }
  .container div.box navicon.on span::after {
    transform: rotate(-45deg); margin-top: -2px
  }
  .container div.box mainmenu {
    width: 100%; height: 0px; overflow: hidden; background: var(--header-mobile-mainmenu-background); display: flex; align-items: center; position: absolute; top: 100%; left: 0px; z-index: 200; transition: height .3s ease
  }
  .container div.box mainmenu ul {
    display: block; width: 100%; height: auto
  }
  .container div.box mainmenu ul li {
    padding: 4px 0px; height: auto; text-align: center
  }
  .container div.box mainmenu ul li a {
    display: inline-flex; font-size: var(--header-mobile-anchor-font-size); font-weight: normal; height: 40px; color: var(--header-mobile-anchor-color)
  }
  .container div.box mainmenu ul li a::before,
  .container div.box mainmenu ul li a::after {
    background: var(--header-mobile-anchor-color); height: 1px
  }
  .container div.box mainmenu ul li a:hover {
    color: var(--header-mobile-anchor-color) !important
  }
  .container div.box mainmenu ul li a:hover::before,
  .container div.box mainmenu ul li a:hover::after {
    background: var(--header-mobile-anchor-color) !important
  }
  .container div.box mainmenu ul li.on a::before,
  .container div.box mainmenu ul li.on a::after {
    background: var(--header-mobile-anchor-color) !important
  }
  .container div.box mainmenu.on {
    height: max(480px, calc(100vh - 60px))
  }
}