.sub-menu-outside {
  width: 100%;
  height: 56px;
  margin: 0 0 40px 0;
}
.sub-menu-box {
  width: 100%;
  height: 48px;
  border-bottom: 1px solid #eee;
}
.sub-menu-box.fixed {
  height: 68px;
}
.sub-menu-box.fixed .sub-menu {
  margin: 20px auto 40px auto!important;
}
.sub-menu {
  display: flex;
  width: 1400px;
  margin: 0 auto 40px auto;
}
.sub-menu-item {
  display: flex;
  flex-direction: column;
  padding: 0 22px;
}
.sub-menu-item:first-child {
  padding: 0 22px 0 0;
}
.sub-menu-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  color: #222;
}
.sub-menu .sub-menu-item.active a, .sub-menu .sub-menu-item:hover a {
  font-weight: bold;
  color: #004098;
}
.sub-menu .sub-menu-item .active-line {
  display: none;
  width: 30px;
  height: 3px;
  background: #004098;
  border-radius: 3px;
  margin: auto;
}


.sub-menu-item.active .active-line {
  display: block;
}
.sub-menu-item .underline {
  width: 30px;
  height: 1px;
  position: relative;
  margin: 22px 0 0 0;
}
.sub-menu-item:not(.active):hover .underline {
  display: block;
}
.sub-menu-item:not(.active) .underline::after {
  content: '';
  width: 0;
  height: 3px;
  background: #004098;
  position: absolute;
  top: 94%;
  left: 50%;
  transition: all .8s;
}
.sub-menu-item:not(.active):hover .underline::after {
  left: 0%;
  width: 100%;
}
.sub-menu-item.active.none a, body header .fixed .sub-menu-item.active.none a {
  color: rgba(34, 34, 34, 1)!important;
  font-weight: normal;
}
.sub-menu-item.none .active-line {
  background: none!important;
}