.hl_nav {

  background-color: #00358d;

  position: relative;

  z-index: 10;

}

.nav-menu {

  width: 75vw;

  height: 80px;

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

}



.hl_nav .nav_list {

  display: flex;

}

.hl_nav .nav_list li:nth-child(1)::before {

  width: 0;

  left: -0.2vw;

}

.hl_nav .nav_list li::before {

  content: "";

  width: 0;

  height: 4px;

  background-color: #ffffff;

  border-radius: 2px;

  opacity: 1;

  position: absolute;

  left: 0.73vw;

  bottom: 12px;

  transition: all 0.36s;

}

.hl_nav .nav_list li.active::before {

  width: 1.98vw;

  opacity: 1;

}

.hl_nav .nav_list li:hover::before {

  width: 1.98vw;

  opacity: 1;

}

.hl_nav .nav_list li.active {

}

.hl_nav .nav_list li:nth-child(1) {

  width: 4.4vw;

  text-align: left;

}

.hl_nav .nav_list li {

  width: 6.8vw;

  font-size: 16px;

  line-height: 80px;

  position: relative;

}

.hl_nav .nav_list li:last-child:after {

  background-color: transparent;

}

.hl_nav .nav_list li::after {

  content: "";

  width: 1px;

  height: 9px;

  background-color: #0f4194;

  position: absolute;

  right: 25px;

  top: 36px;

}

.hl_nav .nav_list li .drop-down-menu {

  width: 397px;

  min-height: 168px;

  z-index: 100;

  margin-top: 15px;

  background-image: url(../images/drop-menu-bg.png);

  background-repeat: no-repeat;

  background-position: right bottom;

  background-color: #ffffff;

  border-radius: 10px;

  box-shadow: 0px 0px 43px 0px rgba(25, 14, 8, 0.33);

  position: absolute;

  left: -34px;

  top: 20px;

  transition: all 0.4s;

  z-index: -10;

}

.hl_nav .nav_list li:hover .drop-down-menu {

  visibility:visible;

  display: flex;

  opacity: 1;

  top: 0;

}



.hl_nav .nav_list li .drop-down-menu {

  text-align: left;

  padding: 20px 30px 28px;

  box-sizing: border-box;

  display: flex;

  visibility: hidden;

  opacity: 0;

  z-index: -10;

  flex-wrap: wrap;

  position: relative;

}

.hl_nav .nav_list li .drop-down-menu::before{

  content: "";

  width: 397px;

  height: 20px;

  position: absolute;

  left: 0;

  top: -18px;

}

.hl_nav .nav_list li .drop-down-menu::after {

  content: "";

  width: 0;

  height: 0;

  border: 13px solid;

  border-color: transparent transparent #ffffff transparent;

  position: absolute;

  top: -26px;

  left: 49px;

}



.hl_nav .nav_list li .drop-down-menu a {

  width: 165px;

  font-size: 16px;

  font-weight: normal;

  font-stretch: normal;

  line-height: 60px;

  height: 60px;

  letter-spacing: 0px;

  color: #383838;

  position: relative;



}

.hl_nav .nav_list li .drop-down-menu .nav_body:hover{

  font-size: 18px !important;

  font-weight: 600;

  letter-spacing: 0px;

  color: #00358d;

  position: relative;

}



.hl_nav .nav_list li .drop-down-menu .nav_body:hover::after {

  width: 159px;

}





.hl_nav .nav_list li .drop-down-menu a::after{

  content: "";

  width: 0;

  height: 1px;

  background: #00358d;

  position: absolute;

  bottom: 0;

  left: 0;

  transition: all 0.36s;

}





.hl_nav .nav_list li a {

  color: #ffffff;

  font-size: 0.94vw;

}

.hl_nav .nav_list li:nth-child(1) a::after{

  left: 2vw;

}

.hl_nav .nav_list li a::after{

  content: "";

  width: 27px;

	height: 25px;

  background-image: url(../images/banner-ball.png);

  background-repeat: no-repeat;

  position: absolute;

  opacity: 0;

  left: 3vw;

  bottom: -8px;

}

.hl_nav .nav_list li:hover a::after {

  opacity: 1;

}

.hl_nav .nav_list li.active a::after {

  opacity: 1;

}



/* 搜索 */

.search {

  line-height: 80px;

  position: relative;

}

.search img {

  width: 0.94vw;

  height: 1.04vw;

  cursor: pointer;

}

.search::after {

  content: "";

  width: 1px;

  height: 10px;

  background-color: #476dad;

  position: absolute;

  right: 42px;

  top: 36px;

}

.prompt-search {

  width: 388px;

  height: 0;

  padding: 0;

  overflow: hidden;

  position: absolute;

  right: 0;

  bottom: 0px;

  background-color: #ffffff;

  line-height: initial;

  border-radius: 5px;

  box-shadow: 0px 3px 8px 2px rgb(0 0 0 / 10%);

}



.prompt-search .inpt {

  width: 297px;

  height: 37px;

  line-height: 35px;

  padding-left: 19px;

  color: #999;

  float: left;

  border: 1px #ebecec solid;

  border-radius: 5px 0 0 5px;

}

.prompt-search .btn {

  outline: none;

  border: none;

  background: #00358d;

  width: 68px;

  height: 39px;

  line-height: 37px;

  text-align: center;

  color: #fff;

  float: left;

  cursor: pointer;

  border-radius: 0 5px 5px 0;

}

/* ---------------header---------------- */



.header {

  height: 16.09vw;

  background: url(../images/banner-img.png) no-repeat center top;

  /* background-size: 100% 100%; */

  width: 100%;

  padding: 4.06vw 0;

  box-sizing: border-box;

  background-size: 120% 120%;

  animation: bannermoving 3s;

  -webkit-animation: bannermoving 3s;

  animation-fill-mode: forwards;

}

.banner-logo {

  width: 75.05vw;

  margin: 0 auto;

}



/* -----------尾部------------------ */

footer {

  width: 100%;

}



.footer-content {

  width: 100%;

  height: 13.65vw;

  background: url(../images/footer-bg.png), #000000;

  background-position: center;

  background-repeat: no-repeat;

  box-sizing: border-box;

  padding: 2.66vw 12.5vw 2.55vw;

  box-sizing: border-box;

  display: flex;

  justify-content: space-between;

}

.footer-ment a {

  display: inline-block;

  width: 5vw;

  font-family: MicrosoftYaHei-Bold;

  font-size: 0.83vw;

  font-weight: normal;

  font-stretch: normal;

  line-height: 1.25vw;

  letter-spacing: 0vw;

  color: #ffffff;

}

.copyright {

  height: 4.48vw;

  padding: 1.4vw 0 0.99vw;

  text-align: center;

  box-sizing: border-box;

}

.copyright h4 {

  font-size: 0.83vw;

  line-height: 1.35vw;

  color: #272727;

}

.copyright p {

  font-size: 0.73vw;

  color: #444444;

}

.footer-menu {

  display: flex;

}

.footer-menu a {

  margin-right: 1.8vw;

  font-size: 0.83vw;

  line-height: 1.6vw;

  color: #ffffff;

  transition: all 0.36s;



}

.footer-menu a:hover{

  /* text-shadow: 0px 4px 20px #ffffff; */

  color: #6f94d1;

}

.footer-address {

  margin-top: 2.08vw;

}

.footer-address p {

  font-size: 0.83vw;

  line-height: 1.88vw;

  color: #f6f6f6;

  opacity: 0.44;

}

.wechat {

  text-align: end;

  color: #f6f6f6;

}

.wechat img {

  width: 5.36vw;

  height: 5.36vw;

}

.wechat .title {

  font-size: 0.83vw;

  margin-top: 1.2vw;

}

.wechat .english {

  font-size: 0.73vw;

}



/* -------------内页框架---------- */

.layout-box {

  width: 75vw;

  margin: 1.88vw auto;

  position: relative;

}

.position {

  position: absolute;

  right: 0;

  display: flex;

  align-items: center;

}

.position ul {

  display: flex;

  margin-left: 0.17vw;

  font-size: 0.73vw;

  line-height: 1.56vw;

  letter-spacing: 0vw;

  color: #2e2e2e;

}

.position ul li{

  margin-right: 10px;

  position: relative;

}

.position ul li:nth-child(2n+1) {

  margin-right: 5px;

  position: relative;

}



.position ul li::after {

  content: ">";

  position: absolute;

  right: -10px;

  top: 0;

}

.position ul li:first-child::after {

  content: "";

}

.position ul li:last-child::after {

  content: "";

}

.layout-content {

  padding-top: 2.14vw;

  display: flex;

  justify-content: space-between;

}

.layout-content .layout-left {

  width: 13.8vw;

}

.layout-left-head {

  width: 13.8vw;

  height: 6.5vw;

  background-color: #00358d;

  border-radius: 2px;

  text-align: center;

  display: flex;

  flex-direction: column;

  justify-content: center;

  position: relative;

}

.layout-left-head::after {

  content: "";

  width: 13.1vw;

  height: 5.8vw;

  border-radius: 2px;

  border: solid 1px #25509a;

  position: absolute;

  left: 0.3vw;

  top: 0.3vw;

}

.layout-left-head p {

  font-family: MicrosoftYaHei;

  font-size: 1.25vw;

  line-height: 1.15vw;

  letter-spacing: 0vw;

  color: #ffffff;

}

.layout-left-head h4 {

  font-family: Impact;

  margin-top: 0.47vw;

  font-size: 1.56vw;

  font-weight: 600;

  line-height: 1.15vw;

  letter-spacing: 0vw;

  color: #8d9cbf;

}

.left-ment {

  margin-top: 0.42vw;

}

.left-ment .leftmenu-list {

  display: block;

  margin-top: 0.1vw;

  height: 3.75vw;

  line-height: 3.75vw;

  text-align: center;

  width: 100%;

  background-color: #f2f2f2;

  border-radius: 2px;

  border: solid 1px #eaeaea;

  font-size: 0.83vw;

  color: #242424;

}

.left-ment .leftmenu-list:hover .inner {

  font-weight: 600;

}

.left-ment .leftmenu-list.active {

  border: solid 1px #00358d;

  font-size: 0.83vw;

  font-weight: 600;

  color: #242424;

  position: relative;

}



.layout-right {

  width: 57.86vw;

}

.layout-right-title {

  margin-top: 1.52vw;

  position: relative;

  display: flex;

}

.layout-right-title::after {

  content: "";

  width: 100%;

  height: 1px;

  background-color: #eaeaea;

  position: absolute;

  right: 0;

  top: 0.8vw;

}

.layout-right-title p {

  font-size: 1.25vw;

  font-weight: 600;

  background-color: #ffffff;

  line-height: 1.56vw;

  letter-spacing: 0vw;

  color: #242424;

  position: relative;

  text-indent: 0.6vw;

  flex: none;

  padding-right: 18px;

  z-index: 1;

}

.layout-right-title p::after {

  content: "";

  width: 0.21vw;

  height: 1.09vw;

  background-color: #00358d;

  border-radius: 0.1vw;

  position: absolute;

  left: 0;

  top: 0.3vw;

}



/* 渐变线条 */

.linebutton .inner span {

  position: relative;

}

.leftmenu-list.active .inner span::after {

  opacity: 1;

  right: -2vw;

}

.left-ment .leftmenu-list:hover .inner span::after {

  opacity: 1;

  right: -2vw;

}

.linebutton .inner span::after {

  content: "";

  width: 0.5vw;

  height: 0.71vw;

  opacity: 0;

  background-image: url(../images/triangle.png);

  background-size: 100% auto;

  position: absolute;

  right: 0vw;

  top: 0.2vw;

  transition: all 0.5s;

}



.linebutton {

  position: relative;

  cursor: pointer;

}



.linebutton .inner {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.linebutton:before,

.linebutton:after,

.linebutton .inner:before,

.linebutton .inner:after {

  background-color: #00358d;

}



.linebutton.active:before,

.linebutton.active:after,

.linebutton.active .inner:before,

.linebutton.active .inner:after {

  background-color: transparent;

}



.linebutton:before,

.linebutton:after,

.linebutton .inner:before,

.linebutton .inner:after {

  position: absolute;

  content: "";

  display: block;

  -webkit-transition: -webkit-transform 0.3s;

  transition: -webkit-transform 0.3s;

  transition: transform 0.3s;

  transition: transform 0.3s, -webkit-transform 0.3s;

}



.linebutton.both:before,

.linebutton.both:after {

  left: 0;

  width: 100%;

  height: 1px;

  -webkit-transform: scaleX(0);

  transform: scaleX(0);

}



.linebutton.both .inner:before,

.linebutton.both .inner:after {

  top: 0;

  width: 1px;

  height: 100%;

  -webkit-transform: scaleY(0);

  transform: scaleY(0);

}



.linebutton.both .inner:before {

  left: 0;

}



.linebutton.both .inner:after {

  right: 0;

}

/* 左右 */

.linebutton.both .inner:hover:before,

.linebutton.both .inner:hover:after {

  -webkit-transform: scaleY(1);

  transform: scaleY(1);

}



.linebutton.both:before {

  top: 0;

}



.linebutton.both:after {

  bottom: 0;

}

/* 上下 */



.linebutton.both:hover:before,

.linebutton.both:hover:after {

  -webkit-transform: scaleX(1);

  transform: scaleX(1);

}



.linebutton.both:hover .inner:before,

.linebutton.both:hover .inner:after {

  -webkit-transform: scaleY(1);

  transform: scaleY(1);

}



.linebutton.both.clockwise .inner:before {

  -webkit-transform-origin: top center;

  transform-origin: top center;

}



.linebutton.both.clockwise .inner:after {

  -webkit-transform-origin: bottom center;

  transform-origin: bottom center;

}



.linebutton.both.clockwise:before {

  -webkit-transform-origin: right center;

  transform-origin: right center;

}



.linebutton.both.clockwise:after {

  -webkit-transform-origin: left center;

  transform-origin: left center;

}





/* .linebutton.both.clockwise:hover .inner:before {

  -webkit-transform-origin: bottom center;

  transform-origin: bottom center;

}



.linebutton.both.clockwise:hover .inner:after {

  -webkit-transform-origin: top center;

  transform-origin: top center;

}



.linebutton.both.clockwise:hover:before {

  -webkit-transform-origin: left center;

  transform-origin: left center;

}



.linebutton.both.clockwise:hover:after {

  -webkit-transform-origin: right center;

  transform-origin: right center;

} */



/* 联系我们 */

.about-us {

  position: fixed;

  right: 37px;

  top: 50%;

}

.about-us li {

  width: 40px;

  height: 40px;

  background-color: #00358d;

  border-radius: 4px;

  margin-bottom: 11px;

  text-align: center;

  line-height: 40px;

  transition: all 0.36s;

}

.about-us li:hover {

  transform: translate(-2px, 0);

  box-shadow: 2px 5px 10px #b4d1ff;

}





@keyframes fadeInUpzdy {

  0% {

    opacity: 0.4;

    -webkit-transform: translateY('10px');

    -ms-transform: translateY('10px');

    transform: translateY('10px')

  }

  100% {

    opacity: 1;

    -webkit-transform: none;

    -ms-transform: none;

    transform: none

  }

}



/* @-webkit-keyframes fadeInUp {

  0% {

    opacity: 0.4;

    -webkit-transform: translate3d(0, 1%, 0);

    -ms-transform: translate3d(0, 1%, 0);

    transform: translate3d(0, 1%, 0)

  }

  100% {

    opacity: 1;

    -webkit-transform: none;

    -ms-transform: none;

    transform: none

  }

} */



/* banner放大 */

@keyframes bannermoving {

  from {

    background-size: 120% 120%;

  }



  to {

    background-size: 100% 100%;

  }

}



@-webkit-keyframes bannermoving {

  from {

    background-size: 120% 120%;

  }



  to {

    background-size: 100% 100%;

  }

}





/* 分页 */

.paging{

  display: flex;

  justify-content: center;

}

.paging a{

  display: inline-block;

  text-align: center;

  line-height: 54px;

  margin: 0 10px;

  width: 52px;

	height: 52px;

	background-color: #ffffff;

  color: #7d7d7d;

	border-radius: 6px;

	border: solid 1px #cecece;

  transition: all 0.2s;

}

.paging a.active{

  color: #ffffff;

  background-color: #00358D;

  border: solid 1px #00358D;

}

.paging a:hover{

  color: #ffffff !important;

  background-color: #00358D !important;

  border: solid 1px #00358D !important;

}

.paging a:hover::after{

  border-color: #ffffff !important;

}

.paging a.first-page::after{

  content: "";

  width: 10px;

  height: 10px;

  border: 1px solid #7d7d7d;

  transform: rotate(225deg);

  border-bottom: none;

  border-left: none;

  position: absolute;

  left: 24px;

  top: 22px;

}

.paging a.next-page::after{

  content: "";

  width: 10px;

  height: 10px;

  border: 1px solid #7d7d7d;

  transform: rotate(45deg);

  border-bottom: none;

  border-left: none;

  position: absolute;

  left: 18px;

  top: 22px;

}

.paging a.first-page,.paging a.next-page{

  background-color: #f5f5f6;

  position: relative;

}



.about-us .we-chat{

  position: relative;

  cursor: pointer;

}

.about-us .we-chat:hover .we-chat-img{

  display: block;

}



.about-us .we-chat-img{

  width: 103px;

	height: 103px;

  border-radius: 2px;

  position: absolute;

  display: none;

  /*background-image: url(../images/wchar.jpg);*/

  background-size: 100%;

  left: -110px;

  top: -55px;

}



@-webkit-keyframes fadeInUp11 {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, 10%, 0);

    transform: translate3d(0, 10%, 0)

  }

  10% {

    opacity: 1;

    -webkit-transform: none;

    transform: none

  }

}

@keyframes fadeInUp11 {

  0% {

    opacity: 0;

    -webkit-transform: translate3d(0, 10%, 0);

    -ms-transform: translate3d(0, 10%, 0);

    transform: translate3d(0, 10%, 0)

  }

  100% {

    opacity: 1;

    -webkit-transform: none;

    -ms-transform: none;

    transform: none

  }

}