/* 静态背景使用同尺寸、同像素的无损 WebP；原图与校验记录见 docs/optimized-images.json。 */
/* 优先使用像素一致的 WebP，原 PNG 保留为格式回退。 */
/* 原站展示样式；资源地址已转为本地文件。 */
@charset "utf-8";

.pro_main {
  width: 100%;
  padding: 40px 0;
  background: url('/images/optimized/c4855e4d60bd35.webp') no-repeat top;
  position: relative;
  min-height: 500px;
}

.pro_main::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  background: url('/images/optimized/bcde8c40f4ef72.webp') no-repeat bottom;
}

.prolist_tab {
  width: 1330px;
  margin: 0 auto;
  display: block;
  margin-bottom: 25px;
}

.prolist_tab ul {
  text-align: center;

  display: flex;

  justify-content: space-between;

  grid-column: auto;

  grid-gap: 10px;
}

.prolist_tab ul li {
  display: inline-block;
  margin: 0 25px;
  cursor: pointer;
  border-radius: 15px;
}

.prolist_tab ul li:hover {
  box-shadow: 0px 0px 7px 0px rgb(99 83 212);
  transform: translateY(-4px);

  -ms-transform: translateY(-4px);

  -webkit-transform: translateY(-4px);

  -o-transform: translateY(-4px);
}

.pro_con {
  width: 1330px;
  margin: 0 auto;
  display: block;
}

.pro_con .pro_list {
  margin-bottom: 70px;
}

.pro_con .pro_list .pro_list_ul {
  width: 100%;
  height: 574px;
  overflow: hidden;
}

.pro_con .pro_list .pro_list_ul .pro_list_ul_li {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.pro_con .pro_list .pro_list_ul .pro_list_ul_li > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pro_con .pro_list .pro_list_ul .pro_list_ul_li .pro_list_ul_con {
  position: absolute;
  left: 0;
  top: 0;
  width: 532px;
  height: 100%;
  background: rgb(0 0 0 / 40%);
  padding: 64px 90px 64px 35px;
}

.pro_con .pro_list .pro_list_ul .pro_list_ul_li .pro_list_ul_con h1 {
  font-size: 36px;
  line-height: 1;
  color: #fff;
  margin-bottom: 16px;
}

.pro_con .pro_list .pro_list_ul .pro_list_ul_li .pro_list_ul_con p {
  font-size: 16px;
  line-height: 36px;
  color: #fff;
  text-align: justify;
}

.pro_con .pro_list .pro_list_ul .pro_list_ul_li .pro_list_ul_con a {
  width: 115px;
  height: 38px;
  border-radius: 19px;
  border: solid 1px #fff;
  text-align: center;
  display: block;
  font-size: 14px;
  color: #fff;
  line-height: 38px;
  position: absolute;
  left: 35px;
  bottom: 35px;
  padding-left: 22px;
}

.pro_con .pro_list .pro_list_ul .pro_list_ul_con a::after {
  display: block;
  content: '';
  width: 22px;
  height: 10px;
  background: url('/images/7dde8f0da8b704.png') no-repeat center;
  position: absolute;
  left: 14px;
  top: 14px;
}

.pro_con .pro_list .pro_list_ul .pro_list_ul_con a:hover {
  background: #147ae3;
  border: solid 1px #147ae3;
}

.product_tab {
  width: 100%;
  height: 70px;
}

.product_tab ul li {
  float: left;
  width: 16.666%;
  height: 70px;
  border-left: solid 4px #f6f6f6;
  text-align: center;
  line-height: 70px;
  font-size: 22px;
  color: #000000;
  background: #fff;
  cursor: pointer;
}

.product_tab ul li:last-child {
  margin-right: 0;
}

.product_tab ul li:first-child {
  border-left: solid 0px #f6f6f6;
}

.product_tab ul li.active {
  background: #8b674d;
  color: #fff;
}

.pro_list1 .product_tab ul li.active,
.pro_list1 .product_tab ul li:hover {
  background: #7154c1;
  color: #fff;
}

.pro_list2 .product_tab ul li.active,
.pro_list2 .product_tab ul li:hover {
  background: #ffba0d;
  color: #fff;
}

.pro_list3 .product_tab ul li.active,
.pro_list3 .product_tab ul li:hover {
  background: #04b6c3;
  color: #fff;
}

.pro_list4 .product_tab ul li.active,
.pro_list4 .product_tab ul li:hover {
  background: #147ae3;
  color: #fff;
}

.pro_list5 .product_tab ul li.active,
.pro_list5 .product_tab ul li:hover {
  background: #018eae;
  color: #fff;
}

.pro_list6 .product_tab ul li.active,
.pro_list6 .product_tab ul li:hover {
  background: #62ad02;
  color: #fff;
}

.pro_list .product_tab ul li:first-child {
  font-weight: bold;
  font-size: 26px;
}

.pro_con .pro_list1 .pro_list_ul .pro_list_ul_con a:hover {
  background: #6336ec;
  color: #fff;
  border: solid 1px #6336ec;
}

.pro_con .pro_list2 .pro_list_ul .pro_list_ul_con a:hover {
  background: #ffba0d;
  color: #fff;
  border: solid 1px #ffba0d;
}

.pro_con .pro_list3 .pro_list_ul .pro_list_ul_con a:hover {
  background: #04b6c3;
  color: #fff;
  border: solid 1px #04b6c3;
}

.pro_con .pro_list4 .pro_list_ul .pro_list_ul_con a:hover {
  background: #147ae3;
  color: #fff;
  border: solid 1px #147ae3;
}

.pro_con .pro_list5 .pro_list_ul .pro_list_ul_con a:hover {
  background: #018eae;
  color: #fff;
  border: solid 1px #018eae;
}

.pro_con .pro_list6 .pro_list_ul .pro_list_ul_con a:hover {
  background: #62ad02;
  color: #fff;
  border: solid 1px #62ad02;
}

.pro_con .pro_list .pro_list_ul .pro_list_ul_li .pro_list_ul_con a.liucheng {
  left: 180px;
}

.crumbs.productcrumbs .main {
  width: 1480px;
}

.productlist {
  padding-bottom: 75px;
}

.productlist .main {
  width: 1480px;
}

.prolis_ttitle {
  background: #147ae3;
  padding: 0 25px;
  margin: 40px 0;
}

.prolis_ttitle h1 {
  color: #ffffff;
}

.prolis_ttitle h1 span:first-child {
  font-size: 30px;
  margin-left: 0;
  line-height: 68px;
}

.prolis_ttitle h1 span {
  font-size: 16px;
  color: #ffffff;
  line-height: 36px;
  margin-left: 20px;
  text-transform: uppercase;
}

.prolis_li {
  margin: 50px 0 0;
  margin-bottom: 0;
}

.prolis_li ul li {
  float: left;
  width: 32.33%;
  margin-right: 1.5%;
  padding-top: 23.28%;
  background: #f7f7f7;
  margin-bottom: 2.5%;
  position: relative;
  overflow: hidden;
}

.prolis_li ul li:nth-child(3n) {
  margin-right: 0;
}

.prolis_li ul li a {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.prolis_li ul li a div {
  width: 100%;
  height: 100%;
}

.prolis_li ul li:hover a div {
  transform: scale(1.02);
}

.prolis_li ul li a p {
  width: 100%;
  font-size: 30px;
  color: #ffffff;
  line-height: 55px;
  background: rgb(69 56 49 / 80%);
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
}

.page {
  margin-bottom: 0;
}

.productinfo {
  padding-bottom: 90px;
  background: url('/images/optimized/c4855e4d60bd35.webp') no-repeat top;
  position: relative;
}

.productinfo::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  background: url('/images/optimized/bcde8c40f4ef72.webp') no-repeat bottom;
}

.productinfo .main {
  width: 1480px;
}

.proinfo_title {
}

.proinfo_title {
  padding: 15px 0;
  position: relative;
}

.proinfo_title h1 {
  font-size: 36px;
  color: #333333;
  line-height: 36px;
  margin-top: 20px;
}

.proinfo_title p {
  font-size: 18px;
  color: #000000;
  line-height: 38px;
  margin-top: 20px;
}

.pro_zhanshi {
}

.procon_tit {
  font-size: 30px;
  color: #000000;
  line-height: 1;
  padding: 20px 0;
  padding-left: 40px;
  background: url('/images/7ec786e803b791.png') no-repeat left;
  border-bottom: solid 1px #efefef;
}

.pro_zhanshi_details {
  padding: 50px 0 30px;
}

.pro_con_details {
  padding: 50px 0;
}

.pro_zhanshi_details_l {
  width: 1180px;
  height: 720px;
  border: solid 1px #efefef;
  background: #fff;
}

.pro_zhanshi_details_r {
  width: 260px;
  height: 682px;
  position: relative;
}

.pro_zhanshi_details_r .buttonkj {
  height: 21px;
  background: #f6f6f6;
  box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 30%);
  margin-top: 15px;
  position: relative;
}

.pro_zhanshi_details_r .buttonkj .swiper-button-next,
.pro_zhanshi_details_r .buttonkj .swiper-button-prev {
  transform: rotate(90deg);
  outline: none;
}

.pro_zhanshi_details_r .buttonkj .swiper-button-prev {
  left: 40px;
}

.pro_zhanshi_details_r .buttonkj .swiper-button-next {
  right: 40px;
}

.pro_zhanshi_details_r .buttonkj .swiper-button-next:after,
.pro_zhanshi_details_r .buttonkj .swiper-button-prev:after {
  font-size: 24px;
  color: #9fa0a0;
}

.pro_zhanshi_details_r .swiper .swiper-slide-thumb-active {
  border: solid 4px #1b6cd8;
  border-radius: 7px;
}

.pro_con_details .container {
  width: 1400px;
  margin: 0 auto;
}

.pro_con_details .container p {
  font-size: 18px;
  color: #000000;
  line-height: 46px;
}

.banner {
  height: auto !important;
}

.prolist_tabpc {
  display: block;
}

.prolist_tabwap {
  display: none;
}

.buttonkjpc {
  display: none;
}

.buttonkjwap {
  display: block;
}

@media screen and (max-width: 1480px) {
  .crumbs.productcrumbs .main,
  .productlist .main,
  .productinfo .main {
    width: 94%;
  }

  .pro_zhanshi_details_l {
    width: 74vw;
  }

  .pro_zhanshi_details_r {
    width: calc(19vw - 20px);
  }
}

@media screen and (max-width: 1480px) {
  .prolist_tab {
    width: 94%;
  }

  .prolist_tab ul li {
    margin: 0 8px;
    width: 18%;
  }

  .pro_con_details .container {
    width: 100%;

    margin: 0 auto;
  }

  .pro_con {
    max-width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  .prolist_tab ul {
    display: flex;

    text-align: center;
  }

  .pro_con {
    width: 94%;
  }

  .pro_con .pro_list .pro_list_ul .pro_list_ul_li .pro_list_ul_con h1 {
    font-size: 26px;
  }

  .pro_con .pro_list .pro_list_ul .pro_list_ul_li .pro_list_ul_con {
    padding: 40px 35px 40px 35px;
  }

  .pro_con .pro_list .pro_list_ul {
    height: 416px;
  }

  .pro_con .pro_list .pro_list_ul .pro_list_ul_li .pro_list_ul_con p {
    font-size: 15px;
    line-height: 2;
  }

  .pro_zhanshi_details_l {
    height: 540px;
  }

  .pro_zhanshi_details_r {
    height: 504px;
  }
}

@media screen and (max-width: 768px) {
  .product_tab ul li {
    font-size: 16px;
  }

  .pro_list .product_tab ul li:first-child {
    font-weight: bold;

    font-size: 20px;
  }

  .prolist_tab ul li:hover {
    box-shadow: 0px 0px 0px 0px rgb(99 83 212/0);

    transform: translateY(0px);

    -ms-transform: translateY(0px);

    -webkit-transform: translateY(0px);

    -o-transform: translateY(0px);
  }

  .prolis_li ul li a p {
    font-size: 20px;
  }

  .pro_zhanshi_details_r .buttonkj .swiper-button-prev {
    left: 10px;
  }

  .pro_zhanshi_details_r .buttonkj .swiper-button-next {
    right: 10px;
  }

  .pro_zhanshi_details_l {
    height: 390px;
  }

  .pro_zhanshi_details_r {
    height: 352px;
  }

  .proinfo_title h1 {
    font-size: 30px;
  }

  .procon_tit {
    font-size: 24px;
  }

  .pro_zhanshi_details {
    padding: 20px 0 30px;
  }

  .pro_con_details {
    padding: 30px 0;
  }

  .productinfo {
    padding-bottom: 30px;
  }
}

@media screen and (max-width: 450px) {
  .product_tab ul {
    display: flex;
    margin-top: 1px;
  }

  .product_tab ul li {
    font-size: 0.94rem;
    flex-grow: 1;
    line-height: 50px;
    height: auto;
    border-left: solid 1px #f6f6f6;
  }

  .pro_list .product_tab ul li:first-child {
    font-weight: bold;

    font-size: 1.2rem;

    width: 7rem;
  }

  .pro_list6 .product_tab ul li:first-child {
    width: 3rem;
  }

  .pro_con .pro_list .pro_list_ul {
    height: auto;
  }

  .pro_con .pro_list .pro_list_ul .pro_list_ul_li .pro_list_ul_con {
    position: static;
    width: 100%;
    height: auto;

    padding: 8% 5%;
    background: rgb(0 0 0 / 60%);
  }

  .pro_con .pro_list2 .pro_list_ul .pro_list_ul_li .pro_list_ul_con {
    background: rgb(255 186 13);
  }

  .pro_con .pro_list4 .pro_list_ul .pro_list_ul_li .pro_list_ul_con {
    background: rgb(20 122 227);
  }

  .pro_con .pro_list3 .pro_list_ul .pro_list_ul_li .pro_list_ul_con {
    background: rgb(4 182 195);
  }

  .pro_con .pro_list5 .pro_list_ul .pro_list_ul_li .pro_list_ul_con {
    background: rgb(1 142 174);
  }

  .pro_con .pro_list6 .pro_list_ul .pro_list_ul_li .pro_list_ul_con {
    background: rgb(98 173 2);
  }

  .pro_con .pro_list .pro_list_ul .pro_list_ul_li .pro_list_ul_con h1 {
    font-size: 1.6rem;
  }

  .pro_con .pro_list .pro_list_ul .pro_list_ul_li .pro_list_ul_con p {
    font-size: 1rem;
  }

  .pro_con .pro_list .pro_list_ul .pro_list_ul_li .pro_list_ul_con a {
    position: relative;
    left: 0;
    bottom: 0;
    display: inline-block;
    line-height: 32px;
    height: auto;

    margin-top: 18px;
    margin-right: 12px;
    font-size: 1rem;
  }

  .pro_con .pro_list .pro_list_ul .pro_list_ul_con a::after {
    top: 12px;
  }

  .pro_con .pro_list .pro_list_ul .pro_list_ul_li .pro_list_ul_con a.liucheng {
    left: 0;
  }

  .pro_con .pro_list .pro_list_ul .pro_list_ul_li > img {
    width: 120%;

    height: 100%;

    object-fit: cover;

    margin-left: -20%;

    max-width: initial;
  }

  .pro_con .pro_list2 .pro_list_ul .pro_list_ul_li:first-child > img {
    margin-left: -12%;
  }

  .pro_con .pro_list {
    margin-bottom: 0px;
  }

  .pro_main {
    padding: 25px 0;
  }

  .prolist_tab ul {
    display: flex;

    text-align: center;

    justify-content: space-between;
  }

  .prolist_tab ul li {
    margin: 0;

    width: 18%;
  }

  .prolist_tab {
    margin-bottom: 10px;
  }

  .prolist_tabpc {
    display: none;
  }

  .prolist_tabwap {
    display: block;
  }

  .prolis_ttitle h1 span {
    font-size: 1rem;

    color: #ffffff;

    line-height: 1;

    margin-left: 10px;

    text-transform: uppercase;
  }

  .prolis_ttitle h1 span:first-child {
    font-size: 1.6rem;

    margin-left: 0;

    line-height: 40px;
  }

  .prolis_ttitle {
    margin: 20px 0 0;
    padding: 0px 15px;
  }

  .prolis_li {
    margin: 20px 0 0;

    margin-bottom: 0;
  }

  .prolis_li ul li {
    float: left;

    width: 100%;

    margin-right: 0%;

    padding-top: 56.25%;

    background: #f7f7f7;

    margin-bottom: 2.5%;

    position: relative;

    overflow: hidden;
  }

  .prolis_li ul li a p {
    font-size: 1.5rem;

    line-height: 2;
  }

  .prolis_ttitle h1 {
    padding-bottom: 2px;
  }

  .productlist {
    padding-bottom: 30px;
  }

  .proinfo_title h1 {
    font-size: 1.6rem;
  }

  .pro_con_details .container p {
    font-size: 1.1rem;

    color: #000000;

    line-height: 2;
  }

  .procon_tit {
    font-size: 1.6rem;
  }

  .pro_zhanshi_details_l {
    width: 94vw;
    height: 270px;
  }

  .pro_zhanshi_details_r {
    width: 100%;
    height: 78px;
    padding: 5px 30px;

    background: #f3f3f3;
  }

  .pro_zhanshi_details_r .swiper .swiper-slide-thumb-active {
    border: solid 1px #1b6cd8;

    border-radius: 3px;
  }

  .pro_zhanshi_details_r .buttonkj .swiper-button-next {
    right: 0;
  }

  .pro_zhanshi_details_r .buttonkj .swiper-button-next,
  .pro_zhanshi_details_r .buttonkj .swiper-button-prev {
    transform: rotate(0deg);
  }

  .pro_zhanshi_details_r .buttonkj .swiper-button-prev {
    left: 0px;
  }

  .pro_zhanshi_details_r .buttonkj {
    height: 21px;

    background: none;

    box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 00%);

    margin-top: 15px;

    position: relative;
    position: static;
  }
}
