@font-face {
  font-family: 'OS1';
  src: url("../fonts/harmonyos_sans_sc_light.ttf");
}
@font-face {
  font-family: 'OS2';
  src: url("../fonts/harmonyos_sans_sc_regular.ttf");
}
@font-face {
  font-family: 'OS3';
  src: url("../fonts/harmonyos_sans_sc_bold.ttf");
}


@keyframes o-upfade-top {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes o-upfade-left {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes indexsvg {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes o-ani5-1 {
  0%,100% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(-10px);
  }
}
.head-height{height:120px}
/***position: fixed***/
.header {position: fixed;top: 0;left: 0;width: 100%;z-index: 9;}
/***导航下拉时的背景***/
  .header.down .top-block{margin-top:-35px;transition: all 200ms linear;}
  
  .header:hover .bot-block, .header.down .bot-block {background-color: #004098;box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  transition: all 200ms linear;}
  .header:hover .logo img.show, .header.down .logo img.show {opacity: 0;}
  .header:hover .logo img.hide, .header.down .logo img.hide {opacity: 1;}
  .header:hover li a.single, .header.down li a.single {color: #FFF;}
  .header.down li a.single {line-height:90px;}

.header .top-block {width:100%;background-color: var(--c1);transition: all 200ms linear;font-family:OS1}
	.header:hover .top-block{background-color: #003a89;transition: all 200ms linear;}
	.header .top-block .block-outer{display: flex; align-items: center;justify-content: space-between;}
	.header .top-block span {font-size:15px;color: rgba(255, 255, 255, 0.5);line-height: 35px;}
	.header .top-block .link {display: flex;align-items: center;grid-gap: 1.5rem;}
	.header .top-block .link a {font-size:14px;color: #fff;opacity: 0.5;transition: opacity .3s ease;}

@media (any-hover: hover) {
  .header .top-block .link a:hover {
    opacity: 1;
  }
}
.header .top-block .link i {width: 1px;height: 1rem;background-color: rgba(255, 255, 255, 0.2);}
.header .top-block .link a.lang:before {
  content: '';
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
}
.header .bot-block {width:100%;background:#FFF}
	.header .bot-block .block-outer {display: flex;align-items: center;justify-content: space-between;font-size:18px;
transition: all 200ms linear;}
.header .logo {position: relative;width: 350px;}
.header .logo img {display: block;width: 100%;}
.header .logo img.hide {position: absolute;top: 0;left: 0;opacity: 0;}
.header .main {display: flex; align-items: center;}
.header ul {display: flex;grid-gap:30px;}
.header li {position: relative;}
.header li a.single {display: block;color: #001533;line-height:90px;position: relative;font-family:fcn2;}
.header li a.single:before {
  content: '';
  width: max(60px, 5.25rem);
  height: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../images/x.png");
  position: absolute;
  top: calc(50% + 13px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}
/***二级***/
.header li .subnav {
  width: max(180px, 15rem);font-family:OS2;
  position: absolute;
  top: 100%;left: -3.75rem;
  background-color: #ffffff;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transition: none;}
.header li .subnav .link .tit {display: block;position: relative;}
.header li .subnav .link .tit:before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: #004098;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity .3s ease;
}
.header li .subnav .link .tit:after {
  font-family:'ax-iconfont';content: "\e60f";font-size:13px;color:#FFF;
  position: absolute;right: 15px;top: 50%;z-index: 2;margin-top: -10px;
  transition: opacity .3s ease;
}
.header li .subnav .link .tit.on:after {
  font-family:'ax-iconfont';content: "\e60f";font-size:13px;color:rgba(0, 0, 0, 0.6);
  position: absolute;right: 15px;top: 50%;z-index: 2;margin-top: -10px;
  transition: opacity .3s ease;
}
.header li .subnav .link .tit.on:hover:after {color:#FFF;}

.header li .subnav .link .tit span {
  display: block;
  font-size: 16px;
  line-height: max(50px, 3.75rem);
  color: #333333;
  padding: 0 2.5rem;
  position: relative;
  z-index: 2;
  transition: color .3s ease;
}
.header li .subnav .link .s-link {
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #004098;
  min-width: 150px;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
}
.header li .subnav .link .s-link a {
  display: block;
  position: relative;
  font-size: max(14px, 1rem);
  color: #fff;
  line-height: max(36px, 3rem);
  padding: 0 2.5rem;
  white-space: nowrap;
}
.header li .subnav .link .s-link a:before {
  content: '';
  position: absolute;
  left: 2.5rem;
  right: 2.5rem;
  bottom: .5rem;
  height: 1rem;
  background: url("../images/x-1.png") left bottom no-repeat;
  background-size: contain;
  opacity: 0;
  transition: opacity .3s ease;
}
.header li .subnav .link .s-link a span {display: block;position: relative;z-index: 2;}


@media (any-hover: hover) {
  .header li .subnav .link .s-link a:hover:before {
    opacity: 1;
  }
}
@media (any-hover: hover) {
  .header li .subnav .link:hover .tit:before {
    opacity: 1;
  }
  .header li .subnav .link:hover .tit:after {
    opacity: 1;
  }
  .header li .subnav .link:hover .tit span {
    color: #fff;
  }
  .header li .subnav .link:hover .s-link {
    opacity: 1;
    visibility: visible;
  }
}
@media (any-hover: hover) {
  .header li:hover a.single:before {
    opacity: 1;
  }
  .header li:hover .subnav {
    opacity: 1;
    visibility: visible;
    transition: all .3s ease;
  }
}

.header .search{margin-left: 2.5rem;text-align:center;}
	.header .search a{color:#FFF;background-color: rgba(0, 0, 0, 0.2);display:block;width: 40px;height: 40px;line-height:40px;border-radius: 50%;}
	.header .search a:hover{background-color: var(--c1);}