.flex {display: flex;}

.kf-top-header-wrap {
  height: 72px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.kf-top-header {
  width: 100%;
  height: 72px;
  background-color: #fff;
  position: fixed;
  z-index: 1000;
  padding: 0 0.4rem 0 0.44rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 0.5rem;
  box-shadow: 0 1px 6px 1px rgb(0 0 0 / 6%);
  border: 1px solid rgba(255,255,255,.1);
  min-width: 1200px;
}
.kf-top-header .logo {
  width: 252px;
  height: 42px;
  background: url('https://sanger-sc-prod.oss-cn-shanghai.aliyuncs.com/static/img/common/header/sanger_logo.png') no-repeat;
  background-size: 100% auto;
  cursor: pointer;
}
.kf-top-header * {
  box-sizing: content-box;
}

.kf-top-header ul,
.kf-top-header li {
  list-style: none;
}

.kf-top-header .nav-list-l,
.kf-top-header .nav-list-r {
  display: flex;
  align-items: center;
  height: 100%;
}
.kf-top-header .nav-list-l .nav-item{
  height: 100%;
  cursor: pointer;
  padding: 0 0.15rem;
}
.kf-top-header .nav-list-l .nav-item > a{
  width: 78px;
  justify-content: center;
}
.kf-top-header .nav-list-l .nav-item a{
  display: flex;
  align-items: center;
  font-size: 16px;
}
.kf-top-header .nav-list-l .nav-item > a,.kf-top-header .nav-list-r .nav-item > a:not(.J-login):not(.reg):not(.nav-item-line) {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  width: 78px;
}
.kf-top-header .nav-list-r {
  justify-content: flex-end;
}
.kf-top-header .nav-list-l {
  flex: 1;
}

.kf-top-header .nav-list-r .nav-item {
  display: flex;
  position: relative;
  padding: 0 0.3rem;
  height: 100%;
}
.kf-top-header .nav-list-r .nav-item > a{
  font-size: 16px;
  height: .32rem;
  line-height: .32rem;
  border-radius: .5rem;
  margin-top: 23px;
}
.kf-top-header .nav-list-r .nav-item:not(.no-login-con):not(.kf-t-h-message-mod) > a {
  width: 1.1rem !important;
  color: #fff !important;
  background: #09B07F !important;
}
.kf-top-header .nav-list-r .nav-item:not(.no-login-con):not(.kf-t-h-message-mod) > a:hover {
  background: #07BE84 !important;
}
.kf-top-header .nav-list-r .no-login-con > div {
  height: .32rem;
  margin-top: 23px;
  padding: 0 10px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.kf-top-header .nav-list-r .no-login-con:hover > div {
  background: #E3FCF5;
  border-radius: .5rem;
}
.kf-top-header .nav-list-r .no-login-con:hover > div a {
  color: #09B07F;
}
.kf-top-header .nav-list-r .nav-item-line {
  margin: 0 5px;
}

/* 鼠标经过时添加下划线 */
.kf-top-header .nav-item.underline > a::after {
  content: '';
  background-color: #09B07F;
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 10px;
  left: 0;
  bottom: -2.5px;
  z-index: 2;
}
.kf-top-header .nav-item.underline:hover > a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 10px;
  left: 0;
  bottom: -2.5px;
  z-index: 2;
}

.kf-top-header .nav-item>a {
  font-size: 16px;
  text-decoration: none;
  color: #2E2F33;
  position: relative;
  height: 100%;
}

.kf-top-header .nav-item>a:hover {
  font-weight: normal;
}
.kf-top-header .nav-list-l .nav-item.current>a,
.kf-top-header .nav-list-r .nav-item.current>a {
  color: #09B07F !important;
  position: relative;
}
.kf-top-header-wrap .icon-wrapper,.kf-top-header-wrap .my-icon {width: 8px;height: 4px;}
.kf-top-header-wrap .icon-wrapper{margin-left: 5px;}

.kf-top-header .nav-list-l .nav-item.current>a .icon-wrapper {
  transform: rotate(180deg);
}
.kf-top-header .nav-list-l .nav-item>a:hover .icon-wrapper {
  transform: rotate(180deg);
  transition: all 0.4s ease;
}
.kf-top-header:hover .nav-item.current>a {
  font-weight: normal;
  border: 0;
}
.kf-t-h-dropdown-wrap {
  background: #fff;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  position: absolute;
  width: 100%;
  left: 0;
  top: 71px;
  padding: 0.34rem 0 .54rem 0;
  font-size: 14px;
  backdrop-filter: blur(5px);
  border-top: 1px solid #DEDEDE;
  display: none;
}
.kf-t-h-dropdown-wrap-box {
  display: flex;
}
.kf-t-h-dropdown-wrap-box.ylc {
  gap: 0.3rem;
  justify-content: center;
}
.kf-t-h-dropdown-wrap-box.ygj {
  gap: .93rem;
  justify-content: flex-start;
  margin-left: 6.9rem;
}
.kf-t-h-dropdown-wrap-box.ykt {
  gap: .4rem;
  justify-content: flex-start;
  margin-left: 8rem;
}
.kf-t-h-dropdown-wrap-box.ywk {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 9rem;
  width: 5.5rem;
}
.kf-t-h-dropdown-wrap-box.ywk ul li {
  min-width: 1.5rem;
}
.kf-t-h-dropdown-wrap-box.ywk ul li.title {
  font-weight: normal;
  margin-bottom: auto;
  font-size: 14px;
}
.kf-t-h-dropdown-wrap-box.cpsc {
  gap: 0.8rem;
  justify-content: flex-start;
  margin-left: 2.75rem;
}

.kf-t-h-dropdown {
  position: relative;
}

.kf-t-h-dropdown a {
  color: rgba(40, 42, 45, .85);
  text-decoration: none;
}

.kf-t-h-dropdown a:hover {
  color: #09B07F !important;
}
.kf-t-h-dropdown>li {
  line-height: 0.34rem;
}

.kf-t-h-dropdown>li.title {
  font-size: 16px;
  margin-bottom: 14px;
  padding-bottom: .12rem;
  border-bottom: 1px solid #E8E8E8;
  align-items: center;
}
.kf-t-h-dropdown>li.title a {
  color: #282A2D;
  text-decoration: none;
}
.kf-t-h-dropdown>li.title .icon-wrapper,.kf-t-h-dropdown>li.title .my-icon {
  width: 24px !important;
  height: 24px !important;
}
.kf-t-h-dropdown>li.title .icon-wrapper {
  margin-right: 5px;
}
.kf-t-h-dropdown>li>a {
  position: relative;
  font-size: 14px !important;
}

/*云课堂*/
.kf-t-h-dropdown-ykt li.children .list {
  position: absolute;
  margin-left: 1.4rem;
  top: 0;
  z-index: 2;
  display: none;
}

.kf-t-h-dropdown-ykt li.children .list:before {
  content: "";
  position: absolute;
  height: 1.7rem;
  width: 1px;
  border-left: 1px solid #09B07F;
}

.kf-t-h-dropdown-ykt li.children.open .list {
  display: block;
}

.kf-t-h-dropdown-ykt li.children .list>div {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: repeat(3, 1rem);
  grid-gap: 0 0.6rem;
  padding-left: 0.5rem;
  flex-direction: row-reverse
}

.kf-t-h-dropdown-ykt li.children>a {
  background: url('https://sanger-sc-prod.oss-cn-shanghai.aliyuncs.com/static/img/common/header/arrow_right.svg') no-repeat right center;
  display: inline-block;
  width: 0.6rem;
  padding-right: 0.2rem;
}

.kf-t-h-dropdown-ykt li.children.open>a {
  color: #09B07F;
}

.kf-t-h-dropdown[nav-index="1"] {
  margin-left: 315px;
}

.kf-t-h-dropdown[nav-index="2"] {
  display: grid;
  grid-template-columns: repeat(4, 2rem);
  margin-left: 218px;
}

.kf-t-h-dropdown[nav-index="3"] {
  margin-left: 5.4rem;
  height: 1.7rem;
}

.kf-t-h-dropdown[nav-index="4"] {
  margin-left: 5.6rem;
}

.kf-t-h-dropdown[nav-index="5"] {
  margin-left: 7rem;
}

/*云文库*/
.kf-t-h-dropdown-ywk {
  display: grid;
  grid-template-columns: repeat(2, 2rem);
}

/*科研产品*/
.kf-t-h-dropdown-shop {
  display: grid;
  grid-template-columns: repeat(2, 2rem);
}

/*消息*/
.kf-t-h-message-mod:hover>a {
  color: #09B07F;
}

.kf-t-h-message-mod>a .dot {
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #ED4014;
  top: 8px;
  right: 8px;
}

.kf-t-h-message {
  width: 400px;
  background: #fff;
  box-shadow: 0 3px 15px 6px rgb(40 54 74 / 12%);
  border-radius: 8px;
  position: absolute;
  z-index: 19;
  right: 5px;
  top: 65px;
  font-size: 14px;
  display: none;
}

.kf-t-h-message:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  background: #fff;
  transform: rotate(-45deg);
  top: -6px;
  right: 30px;
  box-shadow: 3px -3px 5px 0px rgba(0, 0, 0, .05);
}

.kf-t-h-message .tab-title {
  display: flex;
  border-bottom: 1px solid rgba(112, 112, 112, .15);
}

.kf-t-h-message .tab-title li {
  flex: 1;
  text-align: center;
  height: 40px;
  line-height: 40px;
  position: relative;
  cursor: pointer;
  color: #2E2F33;
}

.kf-t-h-message .tab-title li.current img {
  position: relative;
  top: 3px;
  vertical-align: initial;
}
.kf-t-h-message .tab-title li img.notice {
  width: 16px;
  height: 14px;
}
.kf-t-h-message .tab-title li img {
  vertical-align: middle;
}
.kf-t-h-message .tab-title li img.mail {
  width: 12px;
  height: 13px;
}
.kf-t-h-message .tab-title li img.msg {
  width: 12px;
  height: 14px;
}

.kf-t-h-message .tab-title li.current {
  color: #09B07F;
  font-weight: bold;
}
.kf-t-h-message .tab-title li .li-item {
  display: inline-block;
}
.kf-t-h-message .tab-title li.current .li-item {
  border-bottom: 3px solid #09B07F;
}
.kf-t-h-message .tab-title li.current img {
  position: relative;
  left: -10000px;
  filter: drop-shadow(#09B07F 10000px 0);
  vertical-align: initial !important;
}

.kf-t-h-message .list {
  padding: 18px 0;
  color: #333;
  max-height: 400px;
  overflow-y: auto;
}

.kf-t-h-message .list li {
  padding: 7px 30px;
  color: #2E2F33;
}

.kf-t-h-message .list li.unread {
  color: #17233D;
}

.kf-t-h-message .list li:hover {
  color: #fff;
  background: #09B07F;
  cursor: pointer;
}

.kf-t-h-message .list::-webkit-scrollbar {
  width: 8px;
}

.kf-t-h-message .list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.kf-t-h-message .list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}

.kf-t-h-message .list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.kf-t-h-message .action {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e8e8e8;
  padding: 10px;
  align-items: center;
}

.kf-t-h-message .action span {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #2E2F33;
}

.kf-t-h-message .action span:hover {
  color: #2d83e0;
  background: #d9efff;
}

.kf-t-h-message .action a {
  color: #09B07F;
  text-decoration: none;
}

.kf-t-h-message .action a:hover {
  color: #09B07F;
}

.kf-t-h-message .empty {
  text-align: center;
  padding: 30px 0;
}

/*已登录状态*/
.kf-t-h-logged-in {
  position: relative;
  color: #515A6E;
  height: 100%;
}

.kf-t-h-logged-in a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #515A6E;
}

.kf-t-h-logged-in a:hover {
  color: #09B07F;
}

.layui-icon-service:before {
  color: #09B07F;
  margin-right: 6px;
}

.kf-t-h-logged-in>a {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  line-height: 36px;
  background: #C1E9DD;
  color: #09B07F !important;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  margin-top: 20px;
}

.kf-t-h-logged-in-dropdown {
  position: absolute;
  right: -15px;
  margin-top: 14px;
  width: 220px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 15px 6px rgb(40 54 74 / 12%);
  padding: 24px 18px 15px 18px;
  font-size: 14px;
  display: none;
}

.kf-t-h-logged-in-dropdown:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  background: #fff;
  transform: rotate(-45deg);
  top: -6px;
  right: 30px;
  box-shadow: 3px -3px 5px 0px rgba(0, 0, 0, .05);
}

/*等级icon 共3种尺寸 小：mini-level   正常：level   大：large-level*/
.kf-t-h-logged-in .min-level,
.kf-t-h-logged-in .level,
.kf-t-h-logged-in .large-level {
  display: inline-block;
  background: url('https://sanger-sc-prod.oss-cn-shanghai.aliyuncs.com/static/img/common/header/level_icon.png') no-repeat;
  vertical-align: top;
}

.kf-t-h-logged-in .min-level {
  width: 17px;
  height: 17px;
}

.kf-t-h-logged-in .min-level.level-normal {
  background-position: -37px -33px;
}

.kf-t-h-logged-in .min-level.level-vip {
  background-position: -69px -33px;
}

.kf-t-h-logged-in .min-level.level-silver {
  background-position: -102px -33px;
}

.kf-t-h-logged-in .min-level.level-bronze {
  background-position: -133px -33px;
}

.kf-t-h-logged-in .min-level.level-gold {
  background-position: -163px -33px;
}

.kf-t-h-logged-in .level {
  width: 35px;
  height: 35px;
}

.kf-t-h-logged-in .level.level-normal {
  background-position: -32px -71px;
}

.kf-t-h-logged-in .level.level-vip {
  background-position: -83px -71px;
}

.kf-t-h-logged-in .level.level-silver {
  background-position: -131px -71px;
}

.kf-t-h-logged-in .level.level-bronze {
  background-position: -181px -71px;
}

.kf-t-h-logged-in .level.level-gold {
  background-position: -225px -71px;
}

.kf-t-h-logged-in .large-level {
  width: 62px;
  height: 62px;
}

.kf-t-h-logged-in .large-level.level-normal {
  background-position: -22px -138px;
}

.kf-t-h-logged-in .large-level.level-vip {
  background-position: -112px -138px;
}

.kf-t-h-logged-in .large-level.level-silver {
  background-position: -193px -138px;
}

.kf-t-h-logged-in .large-level.level-bronze {
  background-position: -276px -138px;
}

.kf-t-h-logged-in .large-level.level-gold {
  background-position: -356px -138px;
}

.kf-t-h-logged-in .col-top {
  display: flex;
  align-items: center;
}
.kf-t-h-logged-in .col-top .user-avatar {
  width: 39px;
  height: 39px;
  padding: 2px;
  border-radius: 50%;
  background: #09B07F;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  color: #fff;
  font-size: 18px;
}
.kf-t-h-logged-in .col-top .tag {
  color: #999;
  font-size: 12px;
  border: none;
  line-height: initial;
  height: initial;
  padding: 0;
  margin: 0;
}

.kf-t-h-logged-in .col-top-r {
  flex: 1;
}

.kf-t-h-logged-in .col-time {
  font-size: 12px;
  background: #EAF0F9;
  height: 26px;
  line-height: 26px;
  padding-left: 10px;
  border-radius: 4px;
  margin-top: 10px;
}

.kf-t-h-logged-in .col-list {
  margin-top: 12px;
  padding: 12px 0;
}

.kf-t-h-logged-in .col-list li {
  height: 26px;
  line-height: 26px;
}

.kf-t-h-logged-in .col-list li:not(:last-child) {
  margin-bottom: 13px;
}

.kf-t-h-logged-in .col-list img {
  width: 14px;
  margin-right: 8px;
  position: relative;
  vertical-align: inherit;
}

.kf-t-h-logged-in .col-list a:hover img {
  position: relative;
  left: -10000px;
  filter: drop-shadow(#09B07F 10000px 0)
}

.kf-t-h-logged-in .col-im {
  border-bottom: 1px dashed #E7ECF2;
  padding: 12px 10px;
}

.kf-t-h-logged-in .col-vip {
  margin-top: 12px;
  background: #FEDCAE;
  display: block;
  padding: 15px 0;
  color: #D08731;
  text-align: center;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.kf-t-h-logged-in .col-vip:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 130%;
  background: rgba(207, 133, 48, .1);
  border-radius: 100% 0 0 0;
  top: 0;
  left: 0;
}

.kf-t-h-logged-in .col-vip p {
  font-weight: bold;
  margin-bottom: 10px;
}

.kf-t-h-logged-in .col-vip span {
  display: block;
  width: 120px;
  height: 26px;
  line-height: 26px;
  color: #fff;
  background: #CF8530;
  border-radius: 20px;
  margin: 0 auto;
}

.kf-t-h-logged-in .col-vip:hover {
  color: #D08731;
}

.kf-t-h-logged-in .col-out {
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.kf-t-h-logged-in .col-out a {
  flex: 50%;
  margin-bottom: 8px;
}

.kf-t-h-logged-in .col-out img {
  width: 18px;
  vertical-align: middle;
  margin-right: 5px;
}

.my-icon  {
  fill: currentColor
}