body.ov {
    height: 100vh;
    overflow: hidden;
}
.mask_top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  z-index: 100;
  transition: all .5s;
  pointer-events: none;
}

.header {
  position: fixed;
  top: 0;
  height: 1rem;
  width: 100%;
  padding: 0 1.3rem;
  display: flex;
  align-items: center;
  z-index: 999;
}



.header.inner {
  background: #F6F9FF;
  box-shadow: 0 .1rem .641rem 0 rgba(0, 0, 0, 0.06);
}

.header .logo {
  display: flex;
  align-items: center;
  width: 1.31997rem;
  height: .51636rem;
  flex-shrink: 0;
  margin-right: auto;
}

.header .logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header .logo .normal,
.header.inner .logo .active {
  display: block;
}

.header .logo .active,
.header.inner .logo .normal {
  display: none;
}

.header .nav {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-right: auto;
  height: 100%;
}

.header .nav .item {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header .nav .item .label {
  display: block;
  font-weight: 400;
  color: #fff;
  transition: all .3s;
}

.header .nav .item .drop {
  position: fixed;
  top: 1rem;
  left: 0;
  width: 100%;
  height: 0;
  transition: all .5s;

  background: rgba(246, 249, 255, 1);
  overflow: hidden;

  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  /*box-shadow: 0 -.1rem .641rem 0 rgba(0, 0, 0, 0.06);*/
  /*box-shadow: 0 0rem .2rem 0 rgba(0, 0, 0, 0.06);*/
}


.header .nav .item:hover .drop {
  height: .92rem;
  padding: .38rem 0;
  opacity: 1;
}

.header .nav .item .drop a {
  color: #333;
  transition: all .5s;
}

.header .nav .item .drop a:hover {
  color: transparent;
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.header .nav .item .drop_2 {
  position: fixed;
  top: 1rem;
  left: 0;
  width: 100%;
  max-height: 0;
  transition: all .5s;

  background: rgba(246, 249, 255, 1);
  overflow: hidden;
  padding: 0 1.3rem 0 1.3rem;

  display: flex;
  gap: 1.38rem;
  /* z-index: 998; */
  /*box-shadow: 0 0rem .2rem 0 rgba(0, 0, 0, 0.06);*/
}

/*.header .nav .item:hover .drop_2 {*/
/*  max-height: 12rem;*/
/*  padding: .72rem 1.3rem .56rem 1.3rem;*/
/*}*/

.header .nav .item.active .drop_2 {
  max-height: 12rem;
  padding: .72rem 1.3rem .56rem 1.3rem;
}

.header .nav .item .drop_2 .left .list {
  display: flex;
  flex-direction: column;
  gap: .28rem;
}

.header .nav .item .drop_2 .left .list .item {
  width: 2.41rem;
  flex-shrink: 0;
  border-radius: .25rem;
  padding: .14rem .27rem;
  color: rgba(51, 51, 51, 1);
  line-height: 1;
  position: relative;
  cursor: pointer;
}

.header .nav .item .drop_2 .left .list .item span {
  position: relative;
  z-index: 1;
}

.header .nav .item .drop_2 .left .list .item:hover,
.header .nav .item .drop_2 .left .list .item.on {
  color: #fff;
}

.header .nav .item .drop_2 .left .list .item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: .25rem;
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
  opacity: 0;
  transition: all .3s;
}

.header .nav .item .drop_2 .left .list .item:hover::after,
.header .nav .item .drop_2 .left .list .item.on::after {
  opacity: 1;
}

.header .nav .item .drop_2 .right .right_box {
  display: none;
}

.header .nav .item .drop_2 .right .right_box.on {
  display: block;
}

.header .nav .item .drop_2 .right .tabs {
  display: flex;
  gap: .2rem;
}

.header .nav .item .drop_2 .right .tabs .tab {
  /* width: 2.41rem; */
  flex-shrink: 0;
  border-radius: .5rem;
  padding: .13rem .36rem;
  color: rgba(51, 51, 51, 1);
  line-height: 1;
  position: relative;
  cursor: pointer;
}

.header .nav .item .drop_2 .right .tabs .tab span {
  position: relative;
  z-index: 1;
}

.header .nav .item .drop_2 .right .tabs .tab:hover,
.header .nav .item .drop_2 .right .tabs .tab.on {
  color: #fff;
}

.header .nav .item .drop_2 .right .tabs .tab::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: .5rem;
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
  opacity: 0;
  transition: all .3s;
}

.header .nav .item .drop_2 .right .tabs .tab:hover::after,
.header .nav .item .drop_2 .right .tabs .tab.on::after {
  opacity: 1;
}

.header .nav .item .drop_2 .right .content {
  width: 13rem;
  position: relative;
  margin: .36rem 0 0 0;
  height: 5.2rem;
}

.header .nav .item .drop_2 .right .content .swiper_header {
  width: 100%;
  overflow: hidden;
}

.header .nav .item .drop_2 .right .content .tab-swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all .5s;
}

.header .nav .item .drop_2 .right .content .tab-swiper.on {
  opacity: 1;
}

.header .nav .item .drop_2 .right .content .item {
  border-radius: .2rem;
  background: #FFF;
  width: 100%;
  padding: .56rem;
  display: flex;
  flex-direction: column;
}

.header .nav .item .drop_2 .right .content .item .img_box {
  width: 2.83rem;
  height: 2.29rem;
  overflow: hidden;
  margin: auto;
}

.header .nav .item .drop_2 .right .content .item .img_box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header .nav .item .drop_2 .right .content .item .name {
  line-height: 1;
  color: rgba(51, 51, 51, 1);
  margin-top: .8rem;
  text-align: center;
}

.header .nav .item .drop_2 .right .content .item .desc {
  margin-top: .18rem;
  line-height: 1;
  color: rgba(153, 153, 153, 1);
  text-align: center;
}

.header .nav .item .drop_2 .right .controls {
  margin-top: .38rem;
  display: flex;
  justify-content: end;
  position: relative;
  align-items: center;
  height: 1rem;
}

.header .nav .item .drop_2 .right .controls .p_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header .nav .item .drop_2 .right .controls .btns {
  margin: .5rem 0 0 0;
  display: flex;
  justify-content: end;
  gap: .2rem;
}

.header .nav .item .drop_2 .right .controls .btn {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: rgba(51, 51, 51, .2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  cursor: pointer;
  flex-shrink: 0;
}


.header .nav .item .drop_2 .right .controls .btn:hover {
  background: rgba(51, 51, 51, 1);
}

.header .nav .item .drop_2 .right .controls .btn img {
  width: .1rem;
}
.header .nav_m {
  display: none;
}

.header .nav .item .drop_2 .right .content_box {
  position: relative;
  width: 100%;
  /*padding: 1.25rem 1.3rem 2.3rem 1.3rem;*/
  background: rgba(246, 249, 255, 1);
}

/*.header .nav .item .drop_2 .right .content .label {*/
/*  line-height: 1.36;*/
/*  color: #333;*/
/*  text-align: center;*/
/*}*/

.header .nav .item .drop_2 .right .content_box .box {
  /*margin: .5rem 0 0 0;*/
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: .2rem;
  overflow: hidden;
}

.header .nav .item .drop_2 .right .content_box .box .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: .2rem;
}

.header .nav .item .drop_2 .right .content_box .box .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header .nav .item .drop_2 .right .content_box .box .title {
  padding: .35rem 0 0 0;
  position: relative;
  z-index: 1;
  line-height: 1.27;
  color: #fff;
  text-align: center;
}

.header .nav .item .drop_2 .right .content_box .box .info {
  position: absolute;
  width: 4rem;
  right: .2rem;
  bottom: .2rem;
  border-radius: .2rem;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(.48rem);
  padding: .28rem .34rem;
}

.header .nav .item .drop_2 .right .content_box .box .info .info_title {
  line-height: 1.36;
  color: #fff;
}

.header .nav .item .drop_2 .right .content_box .box .info .info_desc {
  line-height: 1.36;
  color: rgba(255, 255, 255, 0.7);
  margin: .12rem 0 0 0;
  letter-spacing: 0.56px;
}

.header .nav .item .drop_2 .right .content_box .box .info .btn {
  margin: .37rem 0 0 0;
  display: flex;
}

.header .nav .item .drop_2 .right .content_box .box .info .btn .p_btn {
  border-style: none;
  color: #fff;
}

.header .nav .item .drop_2 .right .content_box .box .info .btn .p_btn:after {
  opacity: 1;
}

.header .nav .item .drop_2 .right .content_box .box .info .btn .p_btn .icon::after {
  opacity: 0;
}

.header .nav .item .drop_2 .right .content_box .box .info .btn .p_btn .icon .normal {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

.header .nav .item .drop_2 .right .content_box .box .info .btn .p_btn .icon .active {
  left: 100%;
  opacity: 0;
}

.header .nav .item .drop_2 .right .points {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.header .nav .item .drop_2 .right .points .point {
  position: absolute;
  width: .42rem;
  height: .42rem;
  z-index: 1;
}

.header .nav .item .drop_2 .right .points .point .icon {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.header .nav .item .drop_2 .right .points .point .icon img {
  width: 100%;
  height: 100%;
}

.header .nav .item .drop_2 .right .points .point:nth-child(1) {
  top: 3.46rem;
  left: 4.58rem;
}

.header .nav .item .drop_2 .right .points .point:nth-child(2) {
  top: 1.67rem;
  left: 4.57rem;
}

.header .nav .item .drop_2 .right .points .point:nth-child(3) {
  top: 1.71rem;
  left: 6.96rem;
}

.header .nav .item .drop_2 .right .points .point:nth-child(4) {
  top: 3.22rem;
  left: 6.51rem;
}

.header .nav .item .drop_2 .right .points .point:nth-child(1) .desc,
.header .nav .item .drop_2 .right .points .point:nth-child(2) .desc {
  position: absolute;
  right: 1.19rem;
  top: .52rem;
  line-height: 1.36;
  color: #333;
  width: 3rem;
  padding: .17rem .23rem;
  transition: all .5s;
  border-radius: .25rem;
  background: #FFF;
  opacity: 0;
}

.header .nav .item .drop_2 .right .points .point:nth-child(3) .desc,
.header .nav .item .drop_2 .right .points .point:nth-child(4) .desc {
  position: absolute;
  left: 1.19rem;
  bottom: .52rem;
  line-height: 1.36;
  color: #333;
  width: 3rem;
  padding: .17rem .23rem;
  transition: all .5s;
  border-radius: .25rem;
  background: #FFF;
  opacity: 0;
}

.header .nav .item .drop_2 .right .points .point.on .desc {
  opacity: 1;
}

.header .nav .item .drop_2 .right .points .point:nth-child(1) .lines,
.header .nav .item .drop_2 .right .points .point:nth-child(2) .lines {
  position: absolute;
  right: 1.26rem;
  top: .85rem;
  opacity: 0;
}

.header .nav .item .drop_2 .right .points .point:nth-child(3) .lines,
.header .nav .item .drop_2 .right .points .point:nth-child(4) .lines {
  position: absolute;
  left: 1.26rem;
  bottom: .85rem;
  opacity: 0;
}

.header .nav .item .drop_2 .right .points .point.on .lines,
.header .nav .item .drop_2 .right .points .point.on .lines {
  opacity: 1;
}

.header .nav .item .drop_2 .right .points .point:nth-child(1) .lines .dot,
.header .nav .item .drop_2 .right .points .point:nth-child(2) .lines .dot {
  position: absolute;
  right: -.1rem;
  top: -.07rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  z-index: 1;
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
}

.header .nav .item .drop_2 .right .points .point:nth-child(3) .lines .dot,
.header .nav .item .drop_2 .right .points .point:nth-child(4) .lines .dot {
  position: absolute;
  left: -.1rem;
  bottom: -.07rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  z-index: 1;
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
}

.header .nav .item .drop_2 .right .points .point:nth-child(1) .lines .lines_icon,
.header .nav .item .drop_2 .right .points .point:nth-child(2) .lines .lines_icon {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.075rem;
  height: .635rem;
  z-index: 0;
}

.header .nav .item .drop_2 .right .points .point:nth-child(3) .lines .lines_icon,
.header .nav .item .drop_2 .right .points .point:nth-child(4) .lines .lines_icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 1.075rem;
  height: .635rem;
  z-index: 0;
}

.header .nav .item .drop_2 .right .points .point:nth-child(1) .lines .lines_icon img,
.header .nav .item .drop_2 .right .points .point:nth-child(2) .lines .lines_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header .nav .item .drop_2 .right .points .point:nth-child(3) .lines .lines_icon img,
.header .nav .item .drop_2 .right .points .point:nth-child(4) .lines .lines_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(179deg);
}









.header.inner .nav .item .label {
    display: flex;
    align-items: center;
    height: 100%;
  color: #333;
}

.header.inner:after {
    content: "";
    position: absolute;
    height: 1rem;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 .1rem .641rem 0 rgba(0, 0, 0, 0.06);
    pointer-events: none;
    z-index: 999;
}

.header.inner .nav .item:hover .label,
.header.inner .nav .item.on .label {
  color: transparent;
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* .header.inner .nav .item:hover .label,
.header.inner .nav .item.on .label {
  color: rgba(0, 110, 190, 1);
} */

.header .nav .item.on .label {
  /* color: #fff; */
}

.header .nav .item .label::after {
  content: "";
  position: absolute;
  left: 0;
  /*bottom: .3rem;*/
  bottom: 0;
  width: 0;
  height: .02rem;
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
  transition: all .3s;
}

.header.inner .nav .item .label::after {
  /* background: rgba(0, 110, 190, 1); */
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
  /*bottom: 0;*/
}

.header .nav .item:hover .label::after,
.header .nav .item.on .label::after {
  width: 100%;
}

.header .btns {
  display: flex;
  gap: .32rem;
  align-items: center;
}

.header .btns .btn {
  display: flex;
  align-items: center;
  gap: .1rem;
  width: .56rem;
  height: .56rem;
  border-radius: 50%;
  border: 1px solid #C8C8C8;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header .btns .btn img {
  width: .18rem;
  height: .18rem;
}

.header .btns .btn .normal,
.header.inner .btns .btn .active {
  display: block;
}

.header.inner .btns .btn .normal,
.header .btns .btn .active {
  display: none;
}

.header .btns .btn.lang {
  color: #fff;
}

.header.inner .btns .btn.lang {
  color: #333;
}

.header .btns .btn.nav {
    display: none;
}

.header .btns .contact {
  width: unset;
  height: unset;
}

.header .btns .contact.p_btn {
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
  border-color: transparent;
  border-style: none;
  color: #fff;
}

.header .btns .contact.p_btn .icon::after {
  background: #fff;
}

.header .btns .contact.p_btn .icon .normal {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

.header .btns .contact.p_btn .icon .active {
  left: 100%;
  opacity: 0;
}

.footer {
  background: rgba(25, 25, 25, 1);
  padding: .74rem 0 0 0;
  position: relative;
}

.footer .footer_logo_mask {
    position: absolute;
    width: 4.45rem;
    height: 6.85rem;
    top: 0;
    right: 2.41rem;
    pointer-events: none;
}

.footer.index {
  padding: 2.41rem 0 0 0;
}

.footer .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.3rem;
}

.footer .top .logo {
  display: flex;
  align-items: center;
  width: 1.57007rem;
  height: .61416rem;
  flex-shrink: 0;
  margin-right: auto;
}

.footer .top .logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer .f_back {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);

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

.footer .f_back img {
  width: .15rem;
}

.footer .main {
  display: flex;
  margin: .6rem 0 0 0;
  padding: 0 1.3rem;
}

.footer .main .ul {
  display: flex;
  justify-content: center;
  width: 100%;

}

.footer .main .ul li {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  gap: .22rem;
}

.footer .main .ul li a {
  color: rgba(153, 153, 153, 1);
  line-height: 1.8125;
  font-weight: 300;
  transition: all .5s;
}


.footer .main .ul li a:first-child {
  color: rgba(249, 249, 249, 1);
  font-weight: 400;
  line-height: 1.16;
  margin-bottom: .2rem;
}

.footer .main .ul li a:hover {
  color: rgba(249, 249, 249, 1);
}

.footer .main .right .info {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.footer .main .right .phone {
  color: #fff;
  font-weight: 400;
  line-height: 1;
  font-family: "Microsoft YaHei";
  letter-spacing: 2.16px;
  white-space: nowrap;
}

.footer .main .right .time {
  color: rgba(153, 153, 153, 1);
  font-weight: 400;
  line-height: 1.6;
  font-family: "Microsoft YaHei";
  letter-spacing: .96px;
  margin: .14rem 0 0 0;
  text-align: end;
}

.footer .main .right .qrcode {
  width: 1.6rem;
  height: 1.6rem;
  margin: .74rem 0 0 0;
}

.footer .main .right .qrcode img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer .main .right .qrcode_label {
  margin-top: .18rem;
  color: rgba(153, 153, 153, 1);
  font-weight: 400;
  line-height: 1.12;
  font-family: "Microsoft YaHei";
  letter-spacing: .96px;
}

.footer .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .7rem;
  border-top: 1px solid rgba(82, 82, 82, 1);
  padding: .31rem 1.3rem;
}

.footer .bottom .left {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.footer .bottom .copyright {
  font-family: "Microsoft YaHei";
  font-weight: 400;
  line-height: 1.142;
  color: rgba(137, 137, 137, 1);
  transition: all .5s;
}

.footer .bottom .links {
  display: flex;
  align-items: center;
}

.footer .bottom .links .link {
  font-family: "Microsoft YaHei";
  font-weight: 400;
  line-height: 1.142;
  color: rgba(137, 137, 137, 1);
  transition: all .5s;
  margin-right: 5px;
}

.footer .bottom .links .link:hover {
  color: rgba(249, 249, 249, 1);
}

.footer .bottom .right .text {
  display: flex;
  align-items: center;
  gap: .1rem;
  color: rgba(153, 153, 153, 1);
  font-weight: 400;
  font-family: "Microsoft YaHei";
}
.footer .ul_m {
  display: none;
}









.p_btn {
  display: flex;
  align-items: center;
  gap: .51rem;
  border-style: none;
  border-radius: .28rem;
  padding: .09rem .1rem .09rem .27rem;
  border: 1px solid rgba(215, 215, 215, 1);
  color: #333;
  position: relative;
  transition: all .3s;
}

.p_btn span {
  position: relative;
  z-index: 1;
}

.p_btn:hover {
  border-color: transparent;
  color: #fff;
}

.p_btn:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: .28rem;
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
  opacity: 0;
  transition: all .3s;
}

.p_btn:hover:after {
  opacity: 1;
}

.p_btn .icon {
  position: relative;
  z-index: 1;
  width: .38rem;
  height: .38rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
}

.p_btn .icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
  opacity: 1;
  transition: all .3s;
  z-index: -1;
}

.p_btn:hover .icon::after {
  opacity: 0;
}

.p_btn .icon img {
  width: .18rem;
  display: block;
  position: absolute;
  transition: all 0.3s ease;
}

.p_btn .icon .active {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

.p_btn .icon .normal {
  left: 100%;
  opacity: 0;
}

.p_btn:hover .icon .active {
  left: -100%;
  opacity: 0;
}

.p_btn:hover .icon .normal {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}


.p_label .title {
  font-weight: 700;
  line-height: 1.36;
  font-family: "Microsoft YaHei";
  color: #333;
}

.p_label .title .span {
  color: transparent;
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.p_label .desc {
  font-weight: 400;
  line-height: 1;
  font-family: "Microsoft YaHei";
  color: rgba(102, 102, 102, 1);
  margin: .2rem 0 0 0;
}

.ele_up {
  opacity: 0;
  transform: translateY(.6rem);
}


.yh_600 {
  font-weight: 600;
  font-family: "Microsoft YaHei";
}

.yh_500 {
  font-weight: 500;
  font-family: "Microsoft YaHei";
}

.yh_400 {
  font-weight: 400;
  font-family: "Microsoft YaHei";
}

.p_banner {
  position: relative;
  height: 7.6rem;
}

.p_banner .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.p_banner .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p_banner .info {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.p_banner .info .title {
  line-height: 1.08;
  color: #fff;
}

.crumb {
  display: flex;
  align-items: center;
  gap: .16rem;
}

.crumb a {
  line-height: 1.3;
  color: rgba(102, 102, 102, 1);
}



.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdown-display {
  width: 100%;
  padding: .14rem .23rem .14rem .23rem;
  border-radius: .475rem;
  /* border: 1px solid #ddd; */
  background-color: #fff;
  color: #333;
  cursor: pointer;
  transition: border-color 0.3s;
}

.dropdown-display:hover {
  border-color: #3b82f6;
}

.dropdown-arrow {
  position: absolute;
  right: .14rem;
  top: 50%;
  transform: translateY(-50%);
  border-right: .08rem solid transparent;
  border-left: .08rem solid transparent;
  border-top: .1rem solid #333;
  pointer-events: none;
  color: #333;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;

  border-radius: .08rem;
  margin-top: .05rem;

  /* max-height: 2.5rem; */
  overflow: hidden;
  max-height: 0;
  z-index: 100;
  transition: max-height 0.5s ease;
}

.dropdown-menu.show {
  max-height: 2.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #ddd;
  overflow-y: auto;
}

.dropdown-item {
  padding: 10px 15px;
  cursor: pointer;
  color: #333;
  transition: background-color 0.2s;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

.dropdown-item.selected {
  background-color: #e6f0ff;
  color: #3b82f6;
}


.pagination {
  display: flex;
  align-items: center;
  gap: .12rem;
  justify-content: center;
  margin: 0 auto;
}

.pagination-btn {
  width: .36rem;
  height: .36rem;
  border-radius: 50%;
  border-style: none;
  background-color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.pagination-btn img {
  width: .16rem;
  height: .16rem;
  object-fit: contain;
  pointer-events: none;
}

.pagination-btn:disabled {
  cursor: not-allowed;
}

.pagination-btn .normal,
.pagination-btn:hover .active {
  display: block;
}

.pagination-btn:hover .normal,
.pagination-btn .active {
  display: none;
}

.pagination-page {
  width: .46rem;
  height: .46rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination-page:not(.active) {
  color: rgba(153, 153, 153, 1);
  background-color: transparent;
}

.pagination-page:not(.active):hover {
  color: rgba(17, 17, 17, 1);
}

.pagination-page.active {
  color: rgba(17, 17, 17, 1);
}

.pagination-ellipsis {
  color: #6b7280;
  padding: 0 4px;
}

.bottom_pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*padding: 0 1.3rem 0 38%;*/
  position: relative;
}

.bottom_pagination .to_page {
  display: flex;
  align-items: center;
  gap: .18rem;
  
  position: absolute;
  right: 1.3rem;
}

.bottom_pagination .to_page input {
  background: #fff;
  width: .8rem;
  height: .36rem;
  border-radius: .18rem;
  border-style: none;
  text-align: center;
  appearance: textfield;
}

.bottom_pagination .to_page input[type="number"]::-webkit-outer-spin-button,
.bottom_pagination .to_page input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bottom_pagination .to_page input[type="number"] {
  -moz-appearance: textfield;
}

.p_product_tabs {
  width: 100%;
  height: .84rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  position: relative;
}

.p_product_tabs .tab {
  color: #333;
  text-align: center;
  height: 100%;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  transition: all .5s;

}

.p_product_tabs .tab.on,
.p_product_tabs .tab:hover {
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.p_product_tabs .tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
  transition: all .5s;
}

.p_product_tabs .tab.on::after,
.p_product_tabs .tab:hover::after {
  width: 150%;
}


.modal-wrapper {
  /* 容器本身无样式 */
}

.modal-wrapper .mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: none;
}

.modal-wrapper .modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11.62rem;
  background: #fff;
  border-radius: .2rem;
  /*padding: .69rem 1.3rem 1.3rem 1.3rem;*/
  padding: .69rem .8rem .6rem .8rem;
  z-index: 1000;
  display: none;
}

.modal-wrapper .modal .close {
  position: absolute;
  top: .25rem;
  right: .32rem;
  width: .26rem;
  height: .26rem;
  cursor: pointer;
}

.modal-wrapper .modal .close img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-wrapper .modal .label {
  line-height: 1;
  color: #333;
  text-align: center;
}

.modal-wrapper .modal .form {
  margin: .47rem 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.modal-wrapper .modal .form_item {
  width: calc((100% - .3rem) /2);
}

.modal-wrapper .modal .form_item.long {
  width: 100%;
}

.modal-wrapper .modal .form_item label {
  line-height: 1;
  color: #333;
}

.modal-wrapper .modal .form_item label span {
  color: #F00;
  margin-right: .05rem;
}

.modal-wrapper .modal .form_item input,
.modal-wrapper .modal .form_item textarea {
  width: 100%;
  border-radius: .06rem;
  border: 1px solid #EAEAEA;
  background: #FFF;
  padding: .17rem .13rem;
  margin: .14rem 0 0 0;
}

.modal-wrapper .modal .form_item input::placeholder,
.modal-wrapper .modal .form_item textarea::placeholder {
  color: rgba(153, 153, 153, 1);
}

.modal-wrapper .modal .btn {
  display: flex;
  justify-content: center;
  margin: 0 auto;


}

.modal-wrapper .modal .btn .p_btn {
  background: #fff;
  cursor: pointer;
}

.btns_m {
    display: none;
}

@media (max-width: 1560px) {
    .header .nav {
        gap: .5rem;
    }
    
}
@media (max-width: 1280px) {
    .header .nav {
        gap: .3rem;
    }
}

@media (max-width: 767px) {
    .ele_up {
        opacity: 1;
        transform: unset;
    }
    .header {
        padding: 0 20px;
        height: 50px;
        position: sticky;
        top: 0;
    }
    .header .nav {
        display: none;
    }
    .header .btns .contact {
        display: none;
    }
    
    .header .btns .btn {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    .header .btns .btn img {
        width: 14px;
        height: 14px;
    }
    .header .btns .btn.nav {
        display: flex;
    }
    .header .nav_m {
        display: block;
        position: fixed;
        top: 50px;
        left: 0;
        height: 0;
        width: 100%;
        opacity: 0;
        overflow: hidden;
        transition: all .5s;
        background: #fff;
        /*padding: 17px;*/
      }
    
      .header .nav_m.show {
        height: 100vh;
        opacity: 1;
      }
    
      .header .nav_m .item {
        margin: 20px 0;
      }
    
      .header .nav_m .item .label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
      }
    
      .header .nav_m .item .label a {
        font-size: 16px;
      }
    
      .header .nav_m .item .label .icon {
        width: .2rem;
      }
    
      .header .nav_m .item .label .icon img {
        width: 100%;
        height: 100%;
        transition: all .5s;
      }
    
      .header .nav_m .item .label .icon.show .plus,
      .header .nav_m .item .label .icon .reduce {
        width: 0;
        height: 0;
        overflow: hidden;
        opacity: 0;
      }
    
      .header .nav_m .item .label .icon .plus,
      .header .nav_m .item .label .icon.show .reduce {
    
        width: 100%;
        height: 100%;
        overflow: hidden;
        opacity: 1;
      }
    
      .header .nav_m .item .li_box {
        width: 100%;
        /*height: 0;*/
        max-height: 0;
        opacity: 0;
        padding: .2rem;
        overflow: hidden;
        transition: all .5s;
        display: flex;
        flex-direction: column;
        /*padding: .3rem .3rem;*/
        padding: 0;
        gap: .2rem;
      }
    
      .header .nav_m .item .li_box.show {
        /*height: auto;*/
        max-height: 200px;
        opacity: 1;
        padding: 17px 34px 0 34px;
      }
    
      .header .nav_m .item .li_box a {
        font-size: 16px;
      }
    
    .footer .top {
        padding: 0 20px;
    }
    .footer .main {
        padding: 0 20px;
        flex-direction: column;
    }
    .footer .main .ul {
        display: none;
    }
    .footer .main .right .info {
        align-items: center;
    }
    .footer .bottom {
        padding: 10px 20px;
        flex-direction: column;
        gap: 10px;
    }
    .footer .bottom .left {
        flex-direction: column;
        gap: 10px;
    }
    .footer .ul_m {
        display: block;
      }
    
      .footer ul.ul_m {
        /*display: none;*/
        width: 100%;
        display: flex;
        gap: 0;
        flex-direction: column;
    
      }
    
      .footer .ul_m li {
        width: 100%;
        margin: 0 0 20px 0;
      }
    
      .footer .ul_m .label {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 14px;
      }
    
      .footer .ul_m .label a {
        color: #fff;
      }
    
      .footer .ul_m .label .icon {
        width: 10px;
      }
    
      .footer .ul_m .label .icon img {
        width: 100%;
        height: 100%;
        transition: all .5s;
      }
    
      .footer .ul li a:first-child {
        color: rgba(51, 51, 51, .5);
      }
    
      .footer .ul_m .label .icon.show .plus {
        transform: rotate(90deg);
    
      }
    
      .footer .ul_m .label .icon .plus {
    
        width: 100%;
        height: 100%;
        overflow: hidden;
        opacity: 1;
      }
    
      .footer ul li a {
        color: rgba(255, 255, 255, .8);
        line-height: 1.5;
      }
    
      .footer .ul_m .li_box {
        display: flex;
        flex-direction: column;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all .5s;
    
      }
    
      .footer .ul_m .li_box.show {
        max-height: 5rem;
        opacity: 1;
        margin: 20px 0 0 0;
      }
      
      .footer .main .right {
          margin: 20px 0 0 0;
      }
      
    .p_banner {
        height: 39vw;
    }
    
    .modal-wrapper .modal {
        width: 90vw;
        padding: 20px;
    }
    .modal-wrapper .modal .form_item {
        width: 100%;
    }
    
    .dropdown-menu.show {
        max-height: 3.5rem;
    }
    
    .p_product_tabs {
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px;
        height: auto;
    }
    .p_product_tabs .tab.on::after, .p_product_tabs .tab:hover::after {
        width: 100%;
        bottom: -8px;
    }
    
    .btns_m {
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: center;
        margin: 20px 0 0 0;
    }
    .btns_m .btn {
        position: relative;
      border-style: none;
      width: .4rem;
      height: .4rem;
      border-radius: 50%;
      background: rgba(51, 51, 51, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      cursor: pointer;
    }
    
    .btns_m .btn img {
      width: .1rem;
      position: relative;
      z-index: 1;
    }
    
    .btns_m .btn::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: linear-gradient(95deg, #007AEB 0%, #9CCFFF 100%);
      opacity: 0;
    
    }
    
    .btns_m .btn:hover::after {
      opacity: 1;
    }
    
    .btns_m .btn:hover {
      background: transparent;
    }
    
    .btns_m .btn .normal {
      display: none;
    }
    
    .btns_m .btn .active {
      display: block;
    }
    
    .p_label .desc {
        font-size: 14px;
    }
    
    .p_btn {
        border-radius: .64rem;
    }
    .p_btn::after {
        border-radius: .64rem;
    }
    .p_btn .icon {
        width: .64rem;
        height: .64rem;
    }
    
    .footer.index {
        padding: 50px 0 0 0;
    }
    
    .f_14,
    .f_18,
    .f_16,
    .f_26 {
        font-size: 14px;
    }
    
    .f_20,
    .f_22,
    .f_24 {
        font-size: 16px;
    }
    
    
    .f_30 {
        font-size: 18px;
    }
    
    .f_40 {
        font-size: 20px;
    }
    
    
    .f_34,
    .f_36,
    .f_38,
    .f_44 {
        font-size: 22px;
    }
    
    .f_50 {
        font-size: 24px;
    }
    
    .f_58 {
        font-size: 26px;
    }
}