section {
  /* margin: 80px 0; */
}


/* 导航 */
header {
  position: -webkit-sticky;
  /* 针对Safari浏览器的兼容性 */
  position: sticky;
  z-index: 10000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  height: 5rem;
}

.nav {
  height: 5rem;
  line-height: 5rem;
  background: linear-gradient(to right, #EFF8FF, #DDEAF9);
}

.container {
  width: 87.5rem;
  margin: 0 auto;
}

.nav-btns i {
  width: 22px;
  height: 22px;
  line-height: 22px;
  display: block;
  font-size: 18px;
  margin-left: 14px;
}

.nav .logo {
  width: 7.5rem;
  font-family: 'font-ph-ba';
  font-size: 1rem;
  margin-right: 9.375rem;
}

/* .nav .logo img{
  width: 7.5rem;
  
} */

.nav-list {
  display: flex;
}

.nav-item {
  width: 10rem;
  height: 5rem;
  /* margin-right: 1.25rem; */
  line-height: 5rem;
  text-align: center;
}

.nav-item:hover .nav-link {
  color: #173F95;
}

.nav-item>a>i {
  transform: scale(0.8);
}

.nav-item:hover i {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg) scale(0.8);
  ;
  -ms-transform: rotate(180deg) scale(0.8);
  ;
  transform: rotate(180deg) scale(0.8);
}


.sub-nav i {
  transform: rotate(270deg) scale(0.8) !important;
}

.nav-item:hover .sub-nav {
  display: block;
}

.nav-item .sub-nav {
  left: -7.25rem;
  display: none;
  border-bottom-left-radius: .625rem;
  border-bottom-right-radius: .625rem;
  padding: 2.5rem 6.875rem;
  width: 31.25rem;
  text-align: left;
}

.nav-item .sub-nav li {
  width: 280px;
  height: 3.75rem;
  line-height: 3.75rem;
  padding-left: 2rem;
}

.nav-item .sub-nav li:hover {
  background-color: #E6F1FF;
}

.nav-item .third-nav {
  display: none;
  border-bottom-left-radius: .625rem;
  border-bottom-right-radius: .625rem;
  padding: 2.5rem 2.5rem 2.5rem 0;
  /* width: 17.5rem; */
  text-align: left;
  position: absolute;
  top: 0px;
  left: 26.25rem;
}

.nav-item .third-nav li {
  width: 280px;
  height: 3.75rem;
  line-height: 3.75rem;
  padding-left: 2rem;
}

.nav-item .third-nav li:hover {
  background-color: #E6F1FF;
}

/* .nav-item .sub-nav:hover .third-nav {
  display: block;
} */



.nav-item .third-product-nav {
  display: none;
  border-bottom-left-radius: .625rem;
  border-bottom-right-radius: .625rem;
  padding: 2.5rem 6.875rem 2.5rem 2.5rem;
  /* width: 17.5rem; */
  text-align: left;
  position: absolute;
  top: 0px;
  left: 280px;
}

.nav-item .third-product-nav li {
  width: 280px;
  height: 3.75rem;
  line-height: 3.75rem;
  padding-left: 2rem;
}

.nav-item .third-product-nav li:hover {
  background-color: #E6F1FF;
}



.nav-item i {
  margin-left: .2rem;
}

.serach-bar {
  width: 18.75rem;

}

.serach-bar input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background-color: #F8F8F8 !important;
  font-family: 'font-ph-r';

}

.swiper-container {
  width: 100%;
  max-height: 32.5rem;
}

.swiper-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  /* 图片与slide尺寸相匹配 */
}

.swiper-button-prev,
.swiper-button-next {
  top: calc(50% - 20px);
  width: 3.125rem;
  height: 9.375rem;
  background-color: rgba(255, 255, 255, 0.05)
}

.swiper-button-prev img,
.swiper-button-next img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.swiper-button-prev {
  margin-left: 6.25rem;
}

.swiper-button-next {
  margin-right: 6.25rem;
}


/* 搜索bar */

.serach-main-bar {
  max-width: 50rem;
  width: 100%;
  height: 3.125rem;
  margin: 0 auto;
  position: relative;
  top: -1.5625rem;
  z-index: 9999;
}

.serach-main-bar input {
  width: 100%;
  height: 3.125rem;
  font-family: 'font-ph-r';
}

/* 前景优势 */


.advantage-box .title {
  width: 23.125rem;
  height: 4.375rem;
  font-size: 2.5rem;
  text-align: center;
  /* background-image: url(../images/advantage-title.png); */
  background-size: cover;
}

.advantage-box .swiper-box {
  width: 87.5rem;
  margin-top: 2.5rem;
}



.advantage-box .swiper-box .swiper-slide img {
  /* width: 23.75rem !important; */
  height: 12.5rem !important;
  border-radius: .625rem;
  display: block;
}

.advantage-box .swiper-box .swiper-slide {
  width: 100%;
  height: 426px;
  cursor: pointer;
  /* box-shadow: 0rem 0rem .625rem .0625rem rgba(145,191,203,0.38); */
}

.swiper-slide .overlay {
  position: absolute;
  /* top: 0;
  left: 0; */
  /* width: 23.75rem; */
  height: 100%;
  background: #ffffff;
  opacity: 0;
  z-index: 99999;
  border-radius: .625rem;
  box-shadow: 0px 0px 10px 0px rgba(145, 191, 203, 0.3804);
  padding: 2.25rem;
  display: block;
}



/* .swiper-slide:hover .overlay {
  opacity: 1;
} */

.advantage-box .swiper-box .swiper-slide .advantage-desc {
  position: relative;
  top: -1.25rem;
  /* width: 23.75rem; */
  height: 15.625rem;
  border-radius: .625rem;
  background-color: rgba(255, 255, 255, .9);
  padding: 2.25rem;
}

.advantage-box .swiper-box .swiper-slide .advantage-desc .advantage-name,
.swiper-slide .overlay .advantage-name {
  font-size: 1.375rem;
  font-family: 'font-ph-b';
  margin-bottom: 1.125rem;
}

.advantage-box .swiper-box .swiper-slide .advantage-desc .advantage-intro,
.swiper-slide .overlay .advantage-intro {
  font-size: 1rem;
  font-family: 'font-ph-r';
}

.advantage-box .swiper-box .swiper-buttons {
  width: 87.5rem;
  margin: 20px;
}

.advantage-box .swiper-box .swiper-buttons>div {
  margin: 0 1.375rem;
}

.advantage-box .swiper-box .swiper-buttons img {
  width: 3.75rem;
}

/* 关于 */
.about-box {
  width: 100%;

}

.about-box .about-area {
  /* width: 78.125rem; */
  height: 31.25rem;
  background-image: url('../images/about-bg.png');
  background-size: 78.125rem auto;
  background-repeat: no-repeat;

}

.about-box .about-area .about-block {
  height: 31.25rem;
  width: 87.5rem;
  margin: 0 auto;
}

.about-box .about-area .about-block video {
  width: 490px;
  height: 300px;
}

/* 播放器 覆写 */
#my-video {
  width: 490px;
  height: 300px;
  margin-right: 1.25rem;
}

.video-js .vjs-big-play-button {
  height: 5rem;
  width: 5rem;
  line-height: 5rem;
  border-radius: 5rem;
  transition: all 0.4s;
  font-size: 1.875rem;
  border: none;
  position: relative;
  top: calc(50% - 1.5rem);
}

.vjs-poster img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover !important;
  object-fit: unset !important;
}

.about-box .about-intro {
  width: 55.625rem;
  height: 18.75rem;
  background-color: rgba(255, 255, 255, .7);
  border-radius: .625rem;
  padding: 2.5rem 0 2.5rem 5rem;
}

.about-box .about-intro .about-intro-title {
  font-family: 'font-ph-b';
  font-size: 1.375rem;
  margin-bottom: 1.25rem;
}

.about-box .about-intro .about-intro-desc {
  font-family: 'font-ph-r';
  font-size: .875rem;
  margin-bottom: 1.25rem;
}

.about-box .about-intro .about-intro-btn {
  width: 10rem;
  height: 2.5rem;
  background-color: rgba(255, 255, 255, .1);
  border-radius: .375rem;
  line-height: 2.5rem;
  border: 1px solid #173F95;
  text-align: center;
  cursor: pointer;
  font-family: 'font-ph-b';
  color: #173F95;
  font-size: 14px;
}

.about-box .about-intro .about-intro-btn:hover {
  background-color: #173F95;
  color: #ffffff;
}

/* 证书 */

.certificate-box {
  width: 100%;
  /*min-height: 74.375rem;*/
  background-image: url('../images/certificate-bg.png');
  background-size: cover;
}

.certificate-box .title {
  width: 20.625rem;
  height: 4.375rem;
  font-size: 2.5rem;
  text-align: center;
  background-size: cover;
  background-image: url('../images/certificate-title.png');
}


.certificate-list {
  margin-top: 2.5rem;
  width: 87.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  grid-gap: 100px;
}


@media screen and (max-width:1030px) {
  .certificate-list {
    grid-gap: 20px;
  }
}

@media screen and (max-width:877px) {
  .certificate-list {
    grid-gap: 10px;
  }
}


.certificate-list .certificate-item {
  width: 16.875rem;
  height: 23.125rem;
  /* 元素间隔 */
  position: relative;
  cursor: pointer;
}

.certificate-list .certificate-item .overlay {
  position: absolute;
  width: 16.875rem;
  height: 100%;
  background: linear-gradient(180deg, #173F95 0%, #6F92DE 100%);
  opacity: 0;
  z-index: 100;
  border-radius: .625rem;
  display: block;
}

.certificate-list .certificate-item .certificate-name {
  margin-bottom: .625rem;
}

/* .certificate-list .certificate-item:hover .overlay {
  opacity: 0.9;
  display: block;
} */

.certificate-list .certificate-item img {
  width: 16.875rem;
  height: 23.125rem;
  border-radius: .625rem;
}

.certificate-list .certificate-item .certificate-info {
  width: 16.875rem;
  height: 3.75rem;
  top: -60px;
  text-align: center;
  border-radius: .625rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(249, 250, 202, 0.6));
  backdrop-filter: blur(40px);
  /* 控制模糊程度 */
  background-size: cover;
  background-position: center;
}

.certificate-list .certificate-item .certificate-info .certificate-desc {
  /* display: inline-block;
  white-space: nowrap; 
  width: 80%; 
  overflow: hidden; */
}

.certificate-list .certificate-item .certificate-title {
  font-family: 'font-ph-b';
  font-weight: bold;
  font-size: 1rem;
}

.certificate-list .certificate-item .certificate-desc {
  font-family: 'font-ph-r';
  font-size: .875rem;
  text-align: left;
}

.certificate-box .more-btn {
  margin: 2.5rem;
  width: 10rem;
  height: 2.5rem;
  background-color: #173F95;
  color: #ffffff;
  border-radius: .375rem;
  line-height: 2.5rem;
  border: 1px solid #173F95;
  text-align: center;
  cursor: pointer;
  font-family: 'font-ph-b';
  color: #ffffff;
  font-size: 14px;
}

.certificate-box .more-btn:hover {
  background-color: rgba(255, 255, 255, .1);
  color: #173F95;
}


/* 产品 */

.product-box {
  width: 100%;
}


.product-box .tabs .btn1 {

  color: #173F95;
  font-family: 'font-py-b';
  font-size: 1.375rem;
  width: 15.625rem;
  height: 3.75rem;
  line-height: 3.75rem;
  text-align: center;
  border-radius: 6px 0px 0px 6px;
  background-image: url(../images/notselected-bg-l.png);
  background-size: 100% 100%;
  cursor: pointer;
  position: relative;
  padding-bottom: 10px;
  /* 为三角形留出空间 */
}

.product-box .tabs .btn2 {

  color: #173F95;
  font-family: 'font-py-b';
  font-size: 1.375rem;
  width: 15.625rem;
  height: 4.375rem;
  line-height: 3.75rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0px 6px 6px 0px;
  background-image: url(../images/notselected-bg-r.png);
  background-size: 100% 100%;
  position: relative;
  padding-bottom: 10px;
}

.product-box .tabs .active {
  color: #fff;
  background-color: #173F95;
}

.product-box .tabs .active::after {
  content: '';
  position: absolute;
  left: calc(50% - 10px);
  right: 0;
  bottom: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  /* 上三角形的大小 */
  border-color: #173F95 transparent transparent transparent;
}



.product-box .product-list {
  width: 87.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.product-box .product-list .product-item {
  width: 260px;
  height: 370px;
  background-color: #ffffff;
  cursor: pointer;
  margin-bottom: 22px;
  border: 1px solid transparent;
}

.product-box .product-list .product-item:hover {
  border-color: #173F95;
  border-radius: 10px;
}

.product-box .product-list .product-item .product-img {
  width: 260px;
  height: 150px;
  border-radius: 10px;
}

.product-box .product-list .product-item .product-name {
  height: 22px;
  font-size: 16px;
  margin-left: 18px;
  margin-top: 8px;
}

.product-box .product-list .product-item .product-desc {
  font-family: 'font-ph-r';
  font-size: 14px;
  margin-left: 18px;
  margin-top: 8px;
}

.product-box .product-list .product-item .product-brand {
  font-family: 'font-ph-b';
  font-size: 14px;
  margin-left: 18px;
  margin-top: 8px;
}

.product-box .product-list .product-item .product-button {
  background-color: #E6F1FF;
  color: #173F95;
  font-family: 'font-py-b';
  font-size: .875rem;
  width: 14.25rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 18px;
  margin-top: 8px;
}

.product-box .product-list .product-item:hover .product-button {
  background-color: #173F95;
  color: #fff;
}

.product-box .newest {
  display: none;
}

.product-box .product-list .product-item:hover {
  border-color: #173F95;
  transform: scale(1.1);
  transition: all .6s;
}

.product-box .product-list .product-item:not(:hover) {
  transform: scale(1);
  transition: all .6s;
}





/* 品牌 */

.brand-box {
  width: 100%;
  background-image: url('../images/brand-bg.png');
  background-size: cover;
  padding-top: 5rem;
  min-height: 824px;
  margin: 0 auto !important;
}



.brand-box .tabs .btn1 {

  color: #173F95;
  font-family: 'font-py-b';
  font-size: 1.375rem;
  width: 15.625rem;
  height: 3.75rem;
  line-height: 3.75rem;
  text-align: center;
  border-radius: 6px 0px 0px 6px;
  background-image: url(../images/notselected-bg-l.png);
  background-size: 100% 100%;
  cursor: pointer;
  position: relative;
  padding-bottom: 10px;
  /* 为三角形留出空间 */
}

.brand-box .tabs .btn2 {

  color: #173F95;
  font-family: 'font-py-b';
  font-size: 1.375rem;
  width: 15.625rem;
  height: 4.375rem;
  line-height: 3.75rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0px 6px 6px 0px;
  background-image: url(../images/notselected-bg-r.png);
  background-size: 100% 100%;
  position: relative;
  padding-bottom: 10px;
}

.brand-box .tabs .active {
  color: #fff;
  background-color: #173F95;
}

.brand-box .tabs .active::after {
  content: '';
  position: absolute;
  left: calc(50% - 10px);
  right: 0;
  bottom: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  /* 上三角形的大小 */
  border-color: #173F95 transparent transparent transparent;
}

.brand-box .brand-list {
  width: 87.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 2.5rem;
}

.brand-box .agent {
  display: none;
}


.brand-box .brand-list .brand-item {
  width: 16.25rem;
  cursor: pointer;
  margin-bottom: 1.375rem;
  text-align: center;

}

.brand-box .brand-list .brand-item .brand-img {
  width: 16.25rem;
  height: 6.25rem;
  border-radius: .625rem;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.brand-box .brand-list .brand-item .brand-img:hover {
  border-color: #173F95;
  transform: scale(1.1);
  transition: all .6s;
}

.brand-box .brand-list .brand-item .brand-img:not(:hover) {
  transform: scale(1);
  transition: all .6s;
}




.brand-box .brand-list .brand-item .brand-name {

  font: 1rem 'font-py-r';
  color: #1C1C1C;
  line-height: 3.75rem;

}

/* footer */
.footer {
  background-color: #ffffff;
  height: 40rem;
  margin-bottom: 0 !important;
}

.footer-content {
  /* width: 70%; */
  max-width: 1090px;
  height: 568px;
  margin: 0 auto 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-content .arrow {
  color: #3E3E3E;
  transform: scale(0.6, 0.6) rotate(270deg);
}

.footer-item {
  width: 21.875rem;
  height: 440px;
  margin-left: 3.125rem;
}

.footer-item-content-li {
  margin-bottom: 1.25rem;
}

.footer-item .text {
  margin-bottom: 2.25rem;
}

.footer-item .text>.footer-item-info {
  margin-left: .5rem;
}


.footer-item .footer-item-content-li img {
  width: 46px;
  height: 46px;
}

.footer-item-name {
  margin: 20px 0 40px 0;
  font-size: 20px;
  font-family: 'font-py-r';
  /* text-align: center; */
  padding-left: 10px;
}

.footer-item-info {
  font-size: 14px;
  font-family: 'font-py-r';
  color: #3E3E3E;
  margin-left: 1.125rem;
}

.copy-right {
  margin: 0 auto;
  text-align: center;
  height: 5rem;
  line-height: 5rem;
  font-family: 'font-py-r';
  font-size: .875rem;
  color: #3E3E3E;
}

.horizontal-line {
  border-top: 1px solid #E5E5E5;
  font-size: 0;
  height: 0;
  line-height: 0;
}

/* 悬浮热线 */
.online {
  height: 394px;
}

.online .online-content {
  width: 339px;
  height: 394px;
  display: none;
}

.online .online-btn {
  width: 48px;
  /* height: 170px; */
  height: 48px;
  line-height: 48px;
  background-color: #173F95;
  border-radius: 140px;
}

.online:hover .online-content {
  display: block;

}

.online .online-img {
  width: 46px;
  height: 46px;
}

.online .online-text {
  writing-mode: vertical-rl;
  text-orientation: upright;

}


/* about us */

.aboutus-box #about-video img {
  border-radius: 12px;
}


.hoverBig:hover {
  transform: scale(1.1);
  transition: all .6s;
}

.hoverBig:not(:hover) {
  transform: scale(1);
  transition: all .6s;
}

.team-box {
  height: 45rem;
}


.case-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}