@charset "utf-8";

/*-----------------------------------------------------------*/

/*copyright by 动力无限  www.btoe.cn*/

/*邮箱 btoe@btoe.cn*/

/*合作电话 400-0599-360*/

/*版权所有违者必究*/

/*-----------------------------------------------------------*/

/*Generated by wjdhcms 3.0 */

.dx {

  text-transform: uppercase;

}

.clearboth::after,

.clearboth:after {

  content: "";

  display: block;

  clear: both;

  font-size: 0;

  line-height: 0;

}

.hongbao {

  transform-origin: center bottom;

  animation: upAnimation 2s 0.5s infinite;

}

@keyframes upAnimation {

  0% {

    transform: rotate(0deg);

    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  }

  10% {

    transform: rotate(-12deg);

    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  }

  20% {

    transform: rotate(12deg);

    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  }

  28% {

    transform: rotate(-10deg);

    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  }

  36% {

    transform: rotate(10deg);

    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);

  }

  42% {

    transform: rotate(-8deg);

    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);

  }

  48% {

    transform: rotate(8deg);

    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);

  }

  52% {

    transform: rotate(-4deg);

    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);

  }

  56% {

    transform: rotate(4deg);

    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);

  }

  60% {

    transform: rotate(0deg);

    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);

  }

  100% {

    transform: rotate(0deg);

    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  }

}

@keyframes jello {

  from,

  11.1%,

  to {

    -webkit-transform: none;

    -moz-transform: none;

    transform: none;

  }

  22.2% {

    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);

    -moz-transform: skewX(-12.5deg) skewY(-12.5deg);

    transform: skewX(-12.5deg) skewY(-12.5deg);

  }

  33.3% {

    -webkit-transform: skewX(6.25deg) skewY(6.25deg);

    -moz-transform: skewX(6.25deg) skewY(6.25deg);

    transform: skewX(6.25deg) skewY(6.25deg);

  }

  44.4% {

    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);

    -moz-transform: skewX(-3.125deg) skewY(-3.125deg);

    transform: skewX(-3.125deg) skewY(-3.125deg);

  }

  55.5% {

    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);

    -moz-transform: skewX(1.5625deg) skewY(1.5625deg);

    transform: skewX(1.5625deg) skewY(1.5625deg);

  }

  66.6% {

    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);

    -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg);

    transform: skewX(-0.78125deg) skewY(-0.78125deg);

  }

  77.7% {

    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);

    -moz-transform: skewX(0.390625deg) skewY(0.390625deg);

    transform: skewX(0.390625deg) skewY(0.390625deg);

  }

  88.8% {

    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);

    -moz-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);

    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);

  }

}

@-webkit-keyframes hvr-icon-wobble-vertical {

  16.65% {

    -webkit-transform: translateY(6px);

    transform: translateY(6px);

  }

  33.3% {

    -webkit-transform: translateY(-5px);

    transform: translateY(-5px);

  }

  49.95% {

    -webkit-transform: translateY(4px);

    transform: translateY(4px);

  }

  66.6% {

    -webkit-transform: translateY(-2px);

    transform: translateY(-2px);

  }

  83.25% {

    -webkit-transform: translateY(1px);

    transform: translateY(1px);

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

@keyframes hvr-icon-wobble-vertical {

  16.65% {

    -webkit-transform: translateY(6px);

    transform: translateY(6px);

  }

  33.3% {

    -webkit-transform: translateY(-5px);

    transform: translateY(-5px);

  }

  49.95% {

    -webkit-transform: translateY(4px);

    transform: translateY(4px);

  }

  66.6% {

    -webkit-transform: translateY(-2px);

    transform: translateY(-2px);

  }

  83.25% {

    -webkit-transform: translateY(1px);

    transform: translateY(1px);

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

body {

  height: auto !important;

}

body *:before,

body *:after {

  -webkit-box-sizing: border-box;

  -ms-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

.sjcTop,

.sjcTop2,

.sjcBottom,

.sjcLeft,

.sjcRight,

.bg,

.leftWow,

.topWow,

.rightWow,

.bottomWow {

  -webkit-transition: all 0.8s ease-out;

  transition: all 0.8s ease-out;

}

.banner {

  position: relative;

  overflow: hidden;

  margin: auto;

}

.banner * {

  -webkit-box-sizing: border-box;

  -ms-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

.banner .bannerSwiper,

.banner .wapBanner {

  position: relative;

  overflow: hidden;

  cursor: grab !important;

}

.banner .bannerSwiper ul li,

.banner .wapBanner ul li {

  width: 100%;

  overflow: hidden;

}

.banner .bannerSwiper ul li a,

.banner .wapBanner ul li a {

  display: block;

}

.banner .bannerSwiper img,

.banner .wapBanner img {

  display: block;

  width: 100%;

  object-fit: cover;

  cursor: grab !important;

  -webkit-transition: all 3s ease-out;

  transition: all 3s ease-out;

  -webkit-transform: scale(1.1);

  -moz-transform: scale(1.1);

  -o-transform: scale(1.1);

  transform: scale(1.1);

}

.banner .bannerSwiper .swiper-slide-active img,

.banner .wapBanner .swiper-slide-active img {

  -webkit-transform: scale(1);

  -moz-transform: scale(1);

  -o-transform: scale(1);

  transform: scale(1);

}

@-webkit-keyframes clipSectorIn {

  0% {

    -webkit-clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 0% 0%);

    clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 0% 0%);

  }

  55% {

    -webkit-clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);

    clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);

  }

  100% {

    -webkit-clip-path: polygon(0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);

    clip-path: polygon(0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);

  }

}

@keyframes clipSectorIn {

  0% {

    -webkit-clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 0% 0%);

    clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 0% 0%);

  }

  55% {

    -webkit-clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);

    clip-path: polygon(0% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);

  }

  100% {

    -webkit-clip-path: polygon(0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);

    clip-path: polygon(0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);

  }

}

.banner .bannerSwiper .banner-prev,

.banner .wapBanner .banner-prev {

  position: absolute;

  z-index: 30;

  top: 50%;

  left: -45px;

  width: 40px;

  height: 40px;

  text-indent: -9999px;

  margin-top: -20px;

  background: url(../images/arrow-prev.webp) 50% 50% no-repeat;

  transition: all 0.5s linear;

  cursor: pointer;

  outline: none;

}

.banner .bannerSwiper:hover .banner-prev,

.banner .wapBanner:hover .banner-prev {

  left: 3%;

}

.banner .bannerSwiper .banner-next,

.banner .wapBanner .banner-next {

  position: absolute;

  z-index: 30;

  top: 50%;

  right: -45px;

  width: 40px;

  height: 40px;

  text-indent: -9999px;

  margin-top: -20px;

  background: url(../images/arrow-next.webp) 50% 50% no-repeat;

  transition: all 0.5s linear;

  cursor: pointer;

  outline: none;

}

.banner .bannerSwiper:hover .banner-next,

.banner .wapBanner:hover .banner-next {

  right: 3%;

}

.banner .banner-pagination {

  font-size: 0;

  position: absolute;

  left: 50%;

  -webkit-transform: translateX(-50%);

  transform: translateX(-50%);

  bottom: 6%;

  z-index: 3;

  width: auto;

  text-align: center;

}

.banner .banner-pagination span {

  display: inline-block;

  border: 1px transparent solid;

  opacity: 1;

  padding: 3px;

  border-radius: 100%;

  background: none;

  width: auto;

  height: auto;

  margin: 0 8px !important;

  cursor: pointer !important;

  outline: none;

  width: 16px;

  height: 16px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.banner .banner-pagination span:before {

  content: "";

  display: block;

  border-radius: 100%;

  background: #fff;

  width: 100%;

  height: 100%;

}

.banner .banner-pagination span.swiper-pagination-bullet-active {

  border-color: #fff;

}

@media screen and (max-width: 980px) {

  .banner .banner-pagination span {

    margin: 0 4px !important;

    width: 10px;

    height: 10px;

    padding: 2px;

  }

}

.banner .wapBanner {

  display: none;

}

@media screen and (max-width: 750px) {

  .banner .mbanner-pagination {

    font-size: 0;

    position: absolute;

    width: auto;

    width: 100%;

    left: 0;

    bottom: 20px;

    z-index: 3;

    text-align: center;

  }

  .banner .mbanner-pagination span {

    display: inline-block;

    border: 2px #fff solid;

    opacity: 1;

    border-radius: 100%;

    width: 9px;

    height: 9px;

    background-color: transparent;

    margin: 0 8px !important;

    cursor: pointer;

    outline: none;

    position: relative;

  }

  .banner .mbanner-pagination span.swiper-pagination-bullet-active {

    background-color: #ffffff;

  }

}

@keyframes bowen {

  0% {

    box-shadow: 0 0 0 0 rgba(30, 60, 102, 0.3), 0 0 0 10px rgba(30, 60, 102, 0.3);

  }

  100% {

    box-shadow: 0 0 0 10px rgba(30, 60, 102, 0.3), 0 0 0 20px rgba(30, 60, 102, 0);

  }

}

.title {

  font-size: 54px;

  line-height: 1;

}

.title h3 {

  font-size: 56px;

  position: relative;

  font-weight: 900;

}

.title h3::before {

  content: "";

  display: inline-block;

  vertical-align: top;

  margin-left: -32px;

  margin-right: -34px;

  position: relative;

  top: -13px;

  background: url(../images/title-icon.webp) 0 0 no-repeat;

  width: 66px;

  height: 44px;

  margin-bottom: -30px;

}

.title p {

  margin-top: 24px;

  font-size: 18px;

  color: #494949;

  line-height: 1.666;

}

@media screen and (max-width: 640px) {

  .title h3 {

    font-size: 26px;

  }

  .title p {

    font-size: 12px;

    margin-top: 12px;

  }

}

.moreLink {

  display: block;

  font-size: 16px;

  line-height: 50px;

  text-align: center;

  background-color: #f5f5f5;

  border-radius: 31px;

  border: solid 1px #3d3d3d;

  padding: 5px 25px 5px 10px;

  white-space: nowrap;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.moreLink em {

  width: 50px;

  height: 50px;

  background-color: #1e3c66;

  text-align: center;

  display: inline-block;

  vertical-align: top;

  border-radius: 50%;

  margin-right: 13px;

  position: relative;

  overflow: hidden;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.moreLink em::before {

  content: "";

  background: url(../images/more.webp) center center no-repeat;

  display: block;

  width: 100%;

  height: 100%;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  filter: grayscale(100) brightness(3);

}

@media screen and (min-width: 981px) {

  .moreLink:hover {

    border-color: #1e3c66;

    background-color: #1e3c66;

    color: #fff;

  }

  .moreLink:hover em {

    background-color: #fff;

  }

  .moreLink:hover em::before {

    filter: grayscale(0) brightness(1);

    animation: zyfd 1.5s linear infinite;

  }

}

@media screen and (max-width: 980px) {

  .moreLink {

    line-height: 40px;

    padding: 4px 20px 4px 6px;

  }

  .moreLink em {

    width: 40px;

    height: 40px;

    margin-right: 10px;

  }

}

@media screen and (max-width: 640px) {

  .moreLink {

    line-height: 30px;

  }

  .moreLink em {

    width: 30px;

    height: 30px;

  }

  .moreLink em::before {

    background-size: auto 12px;

  }

}

.product {

  position: relative;

  overflow: hidden;

  background: rgba(234, 234, 234, 0.6) url(../images/product-bg.webp) center bottom no-repeat;

  padding: 100px 0 55px;

}

@media screen and (min-width: 1920px) {

  .product {

    background-size: 100%;

  }

}

.product .proNav {

  display: flex;

  justify-content: space-between;

  column-gap: 1.5vw;

}

.product .proNav .title {

  max-width: 1060px;

  padding-top: 22px;

}

.product .proNav ul {

  display: flex;

  justify-content: space-between;

  flex-direction: column;

  row-gap: 26px;

}

.product .proNav ul li a {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-family: Arial;

  font-size: 18px;

  line-height: 1.666;

  position: relative;

  padding-left: 20px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product .proNav ul li a::before {

  content: "";

  display: block;

  position: absolute;

  left: 0;

  margin-top: -3px;

  top: 0.833em;

  width: 6px;

  height: 6px;

  background-color: #3e3e3e;

  border-radius: 50%;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product .proNav ul li a:hover {

  color: #fe7e00;

}

.product .proNav ul li a:hover::before {

  background-color: #fe7e00;

}

.product .productSwiper {

  margin-top: 20px;

  position: relative;

}

.product .productSwiper .swiper-container {

  margin-right: -14px;

}

.product .productSwiper ul li {

  width: 25%;

  padding-right: 14px;

  padding-top: 40px;

  padding-bottom: 50px;

}

.product .productSwiper ul li .item {

  padding: 20px 20px 30px;

  position: relative;

  overflow: hidden;

  z-index: 1;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product .productSwiper ul li .item .img {

  display: block;

  overflow: hidden;

  position: relative;

}

.product .productSwiper ul li .item .img::before {

  content: "";

  display: block;

  padding-top: 85.55%;

}

.product .productSwiper ul li .item .img img {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product .productSwiper ul li .item .box {

  padding: 25px 0 0;

}

.product .productSwiper ul li .item .box .tit {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  text-align: center;

  font-weight: bold;

  font-size: 22px;

  height: 2.728em;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product .productSwiper ul li .item .box .tit span {

  display: block;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

  line-height: 1.364em;

  max-height: 2.728em;

}

.product .productSwiper ul li .item .box .more {

  display: block;

  margin: 12px auto 0;

  max-width: 286px;

  line-height: 20px;

  padding: 10px 0;

  border: solid 1px #c1c1c1;

  text-align: center;

  font-size: 16px;

  color: #949494;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

@media screen and (min-width: 1101px) {

  .product .productSwiper ul li .item:hover {

    background-color: #fff;

    box-shadow: 5px 6px 46px 0px rgba(0, 0, 0, 0.21);

  }

  .product .productSwiper ul li .item:hover .img img {

    -webkit-transform: scale(1.08);

    -moz-transform: scale(1.08);

    -o-transform: scale(1.08);

    transform: scale(1.08);

  }

  .product .productSwiper ul li .item:hover .box .tit {

    color: #1e3c66;

    -webkit-transform: translateY(-5px);

    transform: translateY(-5px);

  }

  .product .productSwiper ul li .item:hover .box .more {

    border-color: #fe7e00;

    background-color: #fe7e00;

    color: #fff;

  }

}

.product .page .pro-prev {

  width: 30px;

  height: 30px;

  background: url(../images/prol.webp) center center no-repeat;

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

  left: -5%;

  cursor: pointer;

  outline: none;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product .page .pro-prev:hover {

  opacity: 0.25;

}

.product .page .pro-next {

  width: 30px;

  height: 30px;

  background: url(../images/pror.webp) center center no-repeat;

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

  right: -5%;

  cursor: pointer;

  outline: none;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product .page .pro-next:hover {

  opacity: 0.25;

}

@media screen and (max-width: 1100px) {

  .product {

    padding: 8vw 0;

  }

  .product .proNav {

    display: block;

  }

  .product .proNav .title {

    padding-top: 0;

  }

  .product .proNav ul {

    margin-top: 30px;

    flex-direction: row;

    flex-wrap: wrap;

    column-gap: 10px;

    row-gap: 16px;

  }

  .product .proNav ul li a {

    font-size: 18px;

  }

  .product .productSwiper {

    margin-top: 50px;

  }

  .product .productSwiper .swiper-container {

    margin-left: -15px;

    margin-right: -15px;

  }

  .product .productSwiper ul li {

    width: 33.333%;

    padding: 0 15px;

  }

  .product .productSwiper ul li .item {

    padding: 0;

  }

  .product .productSwiper ul li .item .box {

    padding: 25px 0 0;

  }

  .product .productSwiper ul li .item .box .tit {

    font-size: 18px;

  }

  .product .productSwiper ul li .item .box .more {

    max-width: 220px;

    line-height: 20px;

    padding: 8px 0;

    font-size: 14px;

  }

  .product .page {

    display: none;

  }

}

@media screen and (max-width: 640px) {

  .product {

    padding: 11vw 0;

  }

  .product .proNav ul li a {

    font-size: 16px;

  }

  .product .productSwiper {

    margin-top: 40px;

  }

  .product .productSwiper .swiper-container {

    margin-left: -8px;

    margin-right: -8px;

  }

  .product .productSwiper ul li {

    width: 50%;

    padding: 0 8px;

  }

  .product .productSwiper ul li .item {

    padding: 0;

  }

  .product .productSwiper ul li .item .box {

    padding-top: 10px;

  }

  .product .productSwiper ul li .item .box .tit {

    font-size: 16px;

  }

  .product .productSwiper ul li .item .box .more {

    margin-top: 5px;

    max-width: 200px;

    padding: 6px 0;

    font-size: 12px;

  }

  .product .page {

    display: none;

  }

}

.about {

  position: relative;

  overflow: hidden;

  background-color: #1e3c66;

  padding-bottom: 50px;

}

.about::before {

  content: "";

  display: block;

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 130px;

  background-color: #fff;

}

.about .aboutBox {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  position: relative;

  z-index: 2;

  margin-left: calc(50% - 50vw);

}

.about .title {

  position: absolute;

  z-index: 3;

  left: 0;

  top: 166px;

  max-width: calc(100% - 480px);

}

.about .title p {

  max-width: 450px;

}

.about .img {

  flex: 1;

  min-width: 0;

  position: relative;

  overflow: hidden;

}

.about .img img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.about .aboutText {

  width: 450px;

  padding-left: 40px;

  padding-top: 148px;

  padding-bottom: 210px;

}

.about .aboutText h1 {

  font-size: 30px;

  font-weight: bold;

  color: #faf4f4;

  line-height: 1.2;

}

.about .aboutText h1::after {

  content: "";

  display: block;

  width: 28px;

  height: 3px;

  background-color: #ffffff;

  border-radius: 2px;

  margin-top: 22px;

}

.about .aboutText .text {

  margin-top: 30px;

  font-size: 16px;

  color: rgba(250, 244, 244, 0.6);

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 11;

  overflow: hidden;

  line-height: 1.875em;

  max-height: 20.625em;

}

.about .number {

  margin-top: -150px;

  background-color: #ffffff;

  box-shadow: 5px 6px 46px 0px rgba(0, 0, 0, 0.07);

  position: relative;

  z-index: 2;

  display: flex;

  justify-content: space-between;

}

.about .number ul {

  flex: 1;

  min-width: 0;

  display: flex;

  justify-content: space-between;

}

.about .number ul li {

  flex: 1;

  height: 230px;

  text-align: center;

  padding-top: 68px;

  width: 100%;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.about .number ul li h4 {

  display: flex;

  justify-content: center;

  align-items: center;

  color: #0a418f;

  font-size: 56px;

  line-height: 50px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.about .number ul li h4 em {

  border-radius: 50%;

  width: 50px;

  height: 50px;

  background-color: #0a418f;

  margin-right: 20px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  position: relative;

  overflow: hidden;

}

.about .number ul li h4 em img {

  position: absolute;

  max-width: 100%;

  max-height: 100%;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.about .number ul li h4 i {

  font-weight: 900;

}

.about .number ul li p {

  margin-top: 16px;

  line-height: 1;

  font-size: 16px;

  color: #464646;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.about .number ul li p span {

  display: block;

}

@media screen and (min-width: 769px) {

  .about .number ul li.on {

    background-color: #1e3c66;

  }

  .about .number ul li.on h4 {

    color: #fff;

  }

  .about .number ul li.on h4 em {

    background-color: #fe7e00;

  }

  .about .number ul li.on p {

    color: #fff;

  }

}

.about .number .videoBtn {

  width: 20%;

  background-color: #fe7e00;

  color: #fff;

  text-align: center;

  cursor: pointer;

  margin-left: 1px;

  display: flex;

  justify-content: center;

  flex-direction: column;

  align-items: center;
  position: relative;

}

.about .number .videoBtn>img{
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about .number .videoBtn i {

  display: block;

  margin: 0 auto;

  width: 74px;

  height: 60px;

  position: relative;

  overflow: hidden;

}

.about .number .videoBtn i img {

  position: absolute;

  max-width: 100%;

  max-height: 100%;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.about .number .videoBtn em {

  margin-top: 10px;

  display: block;

  font-size: 16px;

  font-weight: bold;

}

.about .number .videoBtn em span {

  display: block;

}

.about .number .videoBtn:hover i {

  -webkit-animation: hvr-icon-wobble-vertical 1s;

  -moz-animation: hvr-icon-wobble-vertical 1s;

  animation: hvr-icon-wobble-vertical 1s;

}

@media screen and (max-width: 1320px) {

  .about .number ul li h4 {

    font-size: 46px;

  }

  .about .number ul li h4 em {

    margin-right: 10px;

  }

  .about .number ul li p {

    font-size: 15px;

  }

  .about .number .videoBtn em {

    font-size: 15px;

  }

}

@media screen and (max-width: 1100px) {

  .about .title {

    max-width: 100%;

    top: 8vw;

  }

  .about .aboutBox {

    display: block;

    margin-left: 0;

  }

  .about .aboutBox .img {

    margin-left: calc(50% - 50vw);

    margin-right: calc(50% - 50vw);

  }

  .about .aboutText {

    padding: 0;

    margin-top: 50px;

    width: 100%;

    margin-bottom: 0;

    text-align: center;

  }

  .about .aboutText h1::after {

    margin-left: auto;

    margin-right: auto;

  }

  .about .number {

    margin-top: 40px;

  }

  .about .number ul li {

    padding-top: 50px;

    height: 180px;

  }

  .about .number ul li h4 {

    font-size: 30px;

    line-height: 36px;

  }

  .about .number ul li h4 em {

    margin-right: 5px;

    width: 36px;

    height: 36px;

  }

  .about .number ul li h4 em img {

    max-width: 60%;

    max-height: 60%;

  }

  .about .number ul li p {

    font-size: 14px;

  }

  .about .number .videoBtn em {

    font-size: 14px;

  }

}

@media screen and (max-width: 768px) {

  .about .number ul {

    flex-wrap: wrap;

  }

  .about .number ul li {

    flex: auto;

    width: 50%;

    border-left: 1px solid #eee;

    border-top: 1px solid #eee;

    height: 130px;

    padding-top: 30px;

  }

  .about .number ul li:nth-child(2n-1) {

    border-left: none;

  }

  .about .number ul li:nth-child(1),

  .about .number ul li:nth-child(2) {

    border-top: none;

  }

  .about .number ul li h4 {

    font-size: 30px;

    line-height: 36px;

  }

  .about .number ul li h4 em {

    margin-right: 5px;

    width: 36px;

    height: 36px;

  }

  .about .number ul li h4 em img {

    max-width: 60%;

    max-height: 60%;

  }

  .about .number ul li p {

    font-size: 12px;

    margin-top: 10px;

  }

  .about .number .videoBtn {

    width: 33.33%;

  }

}

@media screen and (max-width: 640px) {

  .about .title {

    text-shadow: 1px 1px 0 #fff;

  }

  .about .aboutText {

    margin-top: 30px;

  }

  .about .aboutText h1 {

    font-size: 24px;

  }

  .about .aboutText h1::after {

    margin-top: 20px;

  }

  .about .aboutText .text {

    margin-top: 20px;

    font-size: 14px;

  }

  .about .number {

    display: block;

  }

  .about .number .videoBtn {

    width: 100%;

    margin-left: 0;

    padding: 22px 0;

  }

  .about .number .videoBtn i {

    height: 40px;

  }

  .about .number .videoBtn em {

    margin-top: 5px;

  }

  .about .number .videoBtn em span {

    display: inline;

  }

}

.equipment {

  padding: 80px 0 90px;

  background: url(../images/equipment-bg.webp) center bottom no-repeat;

}

@media screen and (min-width: 1920px) {

  .equipment {

    background-size: 100%;

  }

}

@media screen and (max-width: 1100px) {

  .equipment {

    padding-top: 40px;

  }

}

.equipment .title {

  text-align: center;

}

.equipment .title h3::before {

  display: none;

}

.equipment .title p {

  color: #777777;

  margin: 26px auto 0;

  max-width: 1320px;

}

.equipment .title::after {

  content: "";

  display: block;

  background: url(../images/title-icon.webp) center 0 no-repeat;

  background-size: contain;

  width: 66px;

  height: 44px;

  margin: 0 auto 0;

}

.equipment .equipmentSwiper {

  margin-top: 38px;

}

.equipment .equipmentSwiper ul li {

  width: 47%;

}

.equipment .equipmentSwiper ul li .item {

  padding: 1px;

}

.equipment .equipmentSwiper ul li .item .img {

  display: block;

  position: relative;

  overflow: hidden;

  border: 10px solid #fff;

  box-shadow: 0 0 0 1px #dfdfdf;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.equipment .equipmentSwiper ul li .item .img::before {

  content: "";

  display: block;

  padding-top: 60.11%;

}

.equipment .equipmentSwiper ul li .item .img img {

  display: block;

  width: 100%;

  height: 100%;

  position: absolute;

  left: 0;

  top: 0;

  object-fit: cover;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.equipment .equipmentSwiper ul li .item .box {

  margin-top: 30px;

  visibility: hidden;

  opacity: 0;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.equipment .equipmentSwiper ul li .item .box .tit {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  text-align: center;

  font-weight: bold;

  font-size: 22px;

  height: 3.272em;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.equipment .equipmentSwiper ul li .item .box .tit span {

  display: block;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

  line-height: 1.636em;

  max-height: 3.272em;

}

.equipment .equipmentSwiper ul li .item .box .more {

  display: block;

  margin: 16px auto 0;

  max-width: 286px;

  line-height: 20px;

  padding: 10px 0;

  border: solid 1px #fe7e00;

  text-align: center;

  font-size: 16px;

  background-color: #fe7e00;

  color: #fff;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

@media screen and (min-width: 1100px) {

  .equipment .equipmentSwiper ul li .item:hover .img img {

    -webkit-transform: scale(1.08);

    -moz-transform: scale(1.08);

    -o-transform: scale(1.08);

    transform: scale(1.08);

  }

  .equipment .equipmentSwiper ul li .item:hover .box .tit {

    color: #1e3c66;

    -webkit-transform: translateY(-5px);

    transform: translateY(-5px);

  }

}

.equipment .equipmentSwiper ul li.swiper-slide-active {

  z-index: 3;

}

.equipment .equipmentSwiper ul li.swiper-slide-active .item .img {

  box-shadow: none;

  border-color: #1e3c66;

}

.equipment .equipmentSwiper ul li.swiper-slide-active .item .box {

  visibility: inherit;

  opacity: 1;

}

.equipment .equipmentSwiper ul li.swiper-slide-prev .item .img {

  transform-origin: left center;

  transform: perspective(400px) scale(0.95) rotateY(6deg) translateX(51%);

}

.equipment .equipmentSwiper ul li.swiper-slide-next .item .img {

  transform-origin: right center;

  transform: perspective(400px) scale(0.95) rotateY(-6deg) translateX(-51%);

}

@media screen and (max-width: 1100px) {

  .equipment .equipmentSwiper {

    margin-left: -4vw;

    margin-right: -4vw;

  }

  .equipment .equipmentSwiper ul li {

    width: 64%;

  }

}

@media screen and (max-width: 640px) {

  .equipment {

    padding-bottom: 50px;

  }

  .equipment .title p {

    margin-top: 12px;

  }

  .equipment .title::after {

    height: 30px;

  }

  .equipment .equipmentSwiper ul li {

    width: 72%;

  }

  .equipment .equipmentSwiper ul li .item .img {

    border-width: 6px;

  }

  .equipment .equipmentSwiper ul li .item .box {

    margin-top: 10px;

  }

  .equipment .equipmentSwiper ul li .item .box .tit {

    font-size: 16px;

  }

  .equipment .equipmentSwiper ul li .item .box .more {

    margin-top: 10px;

    font-size: 12px;

    padding: 6px 0;

  }

}

.titBox {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

}

.titBox .more {

  display: block;

  margin-top: 44px;

  width: 286px;

  line-height: 20px;

  border: solid 1px #cfd0d1;

  font-size: 16px;

  text-align: center;

  padding: 10px 0;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.titBox .more:hover {

  color: #fff;

  background-color: #fe7e00;

  border-color: #fe7e00;

}

@media screen and (max-width: 1100px) {

  .titBox {

    display: block;

  }

  .titBox .title {

    text-align: center;

  }

  .titBox .title p {

    margin-left: auto;

    margin-right: auto;

  }

  .titBox .more {

    margin-top: 30px;

    margin-left: auto;

    margin-right: auto;

  }

}

@media screen and (max-width: 640px) {

  .titBox .more {

    margin-top: 20px;

    font-size: 12px;

    padding: 6px 0;

    max-width: 200px;

  }

}

.credential {

  background: url(../images/credential-bg.webp) center center no-repeat;

  background-size: cover;

  padding: 110px 0 120px;

}

.credential .title {

  color: #fff;

}

.credential .title p {

  max-width: 760px;

  color: #ffffff;

  opacity: 0.5;

}

.credential .titBox .more {

  border: solid 1px rgba(255, 255, 255, 0.2);

  color: #fff;

}

.credential .titBox .more:hover {

  background-color: #fe7e00;

  border-color: #fe7e00;

}

.credential .credentialSwiper {

  margin-top: 50px;

  position: relative;

}

.credential .credentialSwiper .swiper-container {

  margin: 0 -9px;

}

.credential .credentialSwiper ul li {

  width: 16.666%;

  padding: 20px 9px 0;

}

.credential .credentialSwiper ul li .item {

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.credential .credentialSwiper ul li .item .img {

  display: block;

  overflow: hidden;

  background-color: rgba(255, 255, 255, 0.1);

  padding: 15px 13px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.credential .credentialSwiper ul li .item .img i {

  border-radius: 10px;

  position: relative;

  overflow: hidden;

  display: block;

  padding-top: 140.1786%;

  background-color: rgba(255, 255, 255, 0.1);

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.credential .credentialSwiper ul li .item .img img {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.credential .credentialSwiper ul li .item .tit {

  margin-top: 24px;

  display: block;

  text-align: center;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

  line-height: 1.5625em;

  height: 3.125em;

  color: #ffffff;

  opacity: 0.5;

  font-size: 16px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

@media screen and (min-width: 1100px) {

  .credential .credentialSwiper ul li .item:hover {

    -webkit-transform: translateY(-20px);

    transform: translateY(-20px);

  }

  .credential .credentialSwiper ul li .item:hover .img i {

    -webkit-transform: scale(1.1);

    -moz-transform: scale(1.1);

    -o-transform: scale(1.1);

    transform: scale(1.1);

    border-radius: 0;

  }

  .credential .credentialSwiper ul li .item:hover .tit {

    opacity: 1;

    font-weight: bold;

  }

}

.credential .page .credential-prev {

  width: 30px;

  height: 30px;

  background: url(../images/prol.webp) center center no-repeat;

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

  left: -5%;

  cursor: pointer;

  outline: none;

  filter: grayscale(100) brightness(8);

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.credential .page .credential-prev:hover {

  opacity: 0.25;

}

.credential .page .credential-next {

  width: 30px;

  height: 30px;

  background: url(../images/pror.webp) center center no-repeat;

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

  right: -5%;

  cursor: pointer;

  outline: none;

  filter: grayscale(100) brightness(8);

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.credential .page .credential-next:hover {

  opacity: 0.25;

}

@media screen and (max-width: 1360px) {

  .credential .credentialSwiper ul li {

    width: 20%;

  }

}

@media screen and (max-width: 1100px) {

  .credential {

    padding: 80px 0;

  }

  .credential .credentialSwiper {

    margin-top: 40px;

  }

  .credential .credentialSwiper ul li {

    width: 25%;

  }

  .credential .page {

    display: none;

  }

}

@media screen and (max-width: 880px) {

  .credential .credentialSwiper ul li {

    width: 33.3333%;

    padding-top: 0;

  }

}

@media screen and (max-width: 640px) {

  .credential {

    padding: 50px 0;

  }

  .credential .credentialSwiper .swiper-container {

    margin: 0 -6px;

  }

  .credential .credentialSwiper ul li {

    width: 50%;

    padding: 0 6px;

  }

  .credential .credentialSwiper ul li .item .img {

    padding: 10px;

  }

  .credential .credentialSwiper ul li .item .tit {

    margin-top: 10px;

    font-size: 14px;

  }

}

.news {

  padding: 110px 0 80px;

  position: relative;

  overflow: hidden;

}

.news .newsSwiper {

  margin-top: 40px;

  position: relative;

}

.news .newsSwiper ul li {

  width: 22.75%;

  margin-right: 3%;

  padding-top: 20px;

}

.news .newsSwiper ul li .item {

  position: relative;

  overflow: hidden;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.news .newsSwiper ul li .item::before {

  content: "";

  display: block;

  position: absolute;

  z-index: -1;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background-repeat: no-repeat;

  background-image: linear-gradient(160deg, #e5eef3 20%, #1e3c66 80%);

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

  opacity: 0;

}

.news .newsSwiper ul li .item .img {

  display: block;

  position: relative;

  overflow: hidden;

  border-radius: 5px;

  border: solid 1px #eaeaea;

  width: 100%;

  padding-top: 65.56%;

}

.news .newsSwiper ul li .item .img img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  position: absolute;

  left: 0;

  top: 0;

  -webkit-transition: all 0.6s ease-out;

  transition: all 0.6s ease-out;

}

.news .newsSwiper ul li .item .box {

  padding-top: 30px;

}

.news .newsSwiper ul li .item .tit {

  display: block;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

  line-height: 1.4em;

  max-height: 2.8em;

  font-size: 18px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.news .newsSwiper ul li .item .tt {

  margin-top: 20px;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  align-items: center;

  column-gap: 3%;

}

.news .newsSwiper ul li .item .tt .date {

  color: #a5a5a5;

  font-size: 12px;

}

.news .newsSwiper ul li .item .tt .line {

  height: 1px;

  background-color: #ebebeb;

  flex: 1;

  margin-left: 6%;

}

.news .newsSwiper ul li .item .tt .more {

  display: block;

  width: 34px;

  height: 34px;

  background-color: #ffffff;

  border: solid 1px #ebebeb;

  border-radius: 50%;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.news .newsSwiper ul li .item .tt .more::before {

  content: "";

  display: block;

  width: 100%;

  height: 100%;

  background: url(../images/more-icon.webp) center center no-repeat;

  opacity: 0.3;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

@media screen and (min-width: 1101px) {

  .news .newsSwiper ul li .item:hover {

    -webkit-transform: translateY(-20px);

    transform: translateY(-20px);

  }

  .news .newsSwiper ul li .item:hover .img img {

    -webkit-transform: scale(1.1);

    -moz-transform: scale(1.1);

    -o-transform: scale(1.1);

    transform: scale(1.1);

  }

  .news .newsSwiper ul li .item:hover .tit {

    color: #fe7e00;

  }

  .news .newsSwiper ul li .item:hover .tt .more {

    background-color: #fe7e00;

    border-color: #fe7e00;

  }

  .news .newsSwiper ul li .item:hover .tt .more::before {

    filter: grayscale(100) brightness(3);

    opacity: 1;

  }

}

@media screen and (max-width: 1100px) {

  .news {

    padding: 80px 0 80px;

  }

  .news .newsSwiper ul li {

    width: 32%;

    margin-right: 2%;

    padding-top: 0;

  }

  .news .newsSwiper ul li .item .box {

    padding-top: 15px;

  }

  .news .newsSwiper ul li .item .box .tit {

    font-size: 16px;

  }

  .news .newsSwiper ul li .item .box .tt {

    margin-top: 10px;

  }

}

@media screen and (max-width: 640px) {

  .news {

    padding: 50px 0;

  }

  .news .newsSwiper {

    margin-top: 30px;

    margin-right: -4vw;

  }

  .news .newsSwiper ul li {

    width: 70%;

    margin-right: 5%;

  }

}

.cooperation {

  background-color: #f6f6f6;

  padding: 46px 0 40px;

  position: relative;

  overflow: hidden;

}

.cooperation .bd {

  display: flex;

}

.cooperation .bd ul {

  display: flex;

}

.cooperation .bd ul li {

  padding: 10px 0;

}

.cooperation .bd ul li .img {

  margin: 0 15px;

  width: 242px;

  height: 120px;

  position: relative;

  overflow: hidden;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.cooperation .bd ul li .img img {

  position: absolute;

  max-width: 100%;

  max-height: 100%;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  -webkit-filter: grayscale(100);

  filter: grayscale(100);

  opacity: 0.45;

}

.cooperation .bd ul li .img:hover {

  -webkit-transform: scale(1.08);

  -moz-transform: scale(1.08);

  -o-transform: scale(1.08);

  transform: scale(1.08);

}

.cooperation .bd ul li .img:hover img {

  -webkit-filter: grayscale(0);

  filter: grayscale(0);

  opacity: 1;

}

@media screen and (max-width: 1100px) {

  .cooperation .bd ul li {

    padding: 0 ;

  }

  .cooperation .bd ul li .img {

    margin: 0 5px;

    width: 180px;

    height: 90px;

  }

}

@media screen and (max-width: 640px) {

  .cooperation {

    padding: 30px 0;

  }

  .cooperation .bd ul li .img {

    width: 120px;

    height: 60px;

  }

}


.videoShow {
  position: fixed;
  z-index: 9999999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.videoShow .bg {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.videoShow .videoClose {
  position: absolute;
  z-index: 10;
  right: 30px;
  top: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  width: 46px;
  height: 46px;
  cursor: pointer;
}
.videoShow .videoClose::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 24px;
  height: 2px;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.videoShow .videoClose::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 24px;
  height: 2px;
  background-color: #fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.videoShow .videoBox {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 86%;
  height: 86%;
  max-width: 1280px;
  z-index: 10;
}
.videoShow .videoBox img,
.videoShow .videoBox iframe,
.videoShow .videoBox video {
  display: block;
  object-fit: contain;
  max-width: 100% !important;
  max-height: 100% !important;
}