.inPro{
    width:100%;
    position: relative;
}
.inPro:before{
    content: "";
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 41vw;
    max-height:770px;
    background:#f5f5f5;
}
.inPro .pro_title{
    justify-content: space-between;
}
.inPro .pro_title h3{
    color: #222;
    font-weight: 700;
    line-height: 1.2;
    position:relative;
}
.inPro .pro_title h3:before{
    content: "";
    position: absolute;
    bottom: 0;
    left:0;
    width: 50px;
    height:5px;
    background: var(--Secondary-color);
}
.inPro .pro_title p{
    color: #666;
}
.inPro .con h2{
  color: #222;
  font-weight: 700;
  line-height: 1.2;
  position:relative;
}
.inPro .con:nth-child(2n) h2{
    text-align: right;
}
.inPro .con-inner{
    position: relative;
}
.inPro .con:nth-child(2n+1) .con-inner{
     margin-right: 0;
}
.inPro .con:nth-child(2n) .con-inner{
    margin-left: 0;
}
.inPro .con .img {
  width:100%;
  height:32vw;
  max-height:600px;
  overflow: hidden;
  position:relative;
}
.inPro .con .img img {
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  width: 100%;
  height:100%;
  object-fit:cover;
}
.inPro .con .img img.active {
  opacity: 1;
  position: relative;
}
.inPro .text{
  position:absolute;
  top:0;
  width:25%;
  height:100%;
  overflow: hidden;
}
.inPro .con:nth-child(2n+1) .text{
    right: 0;
}
.inPro .con:nth-child(2n) .text{
    left: 0;
}
.inPro .text .js_swiper{
    width:100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.inPro .text .js_swiper .swiper-slide{
    width:100%;
    background: rgba(0,0,0,.3);
    border-top: 1px solid rgba(255,255,255,.2);
    transition: all 0.3s ease-in-out;
}
.inPro .text .js_swiper .swiper-slide.cur{
    background: linear-gradient(to right, rgba(178,24,0,.9), rgba(229,50,23,.9));
}
.inPro .list{
    width: 100%;
    height: 100%;
    position: relative;
    padding: 40px 30px;
    justify-content: space-between;
}
.inPro .HoverIcon{
    width:70px;
    height:70px;
    border-radius: 50%;
    border:1px solid rgba(255,255,255,.2);
    transition: all 0.3s ease-in-out;
    position: relative;
}
.inPro .HoverIcon img{
    width: auto;
    height: auto;
    max-width:70%;
    max-height:70%;
    position:absolute;
    top: 50%;
    left:50%;
    transform:translate(-50%,-50%);
    filter:grayscale(1) brightness(500%);
}
.inPro .cur .HoverIcon{
    background: #fff;
}
.inPro .cur .HoverIcon img{
   filter:none;
}
.inPro .list .con-box{
  width: calc(100% - 102px);
  padding-left: 20px;
  padding-right:20px;
}
.inPro .list h3{
    color: #fff;
    font-weight: 700;
}
.inPro .list .p{
    color:rgba(255,255,255,.4);
    margin-top:10px;
    overflow: hidden;
}
.inPro .list .pro_btn{
    font-weight: 700;
    display: block;
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.3);
    transition: all 0.3s ease-in-out;
    position: relative;
}
.inPro .list .pro_btn:after {
    content: "";
    width: 5px;
    height: 5px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transition: all 0.3s ease-in-out;
    position: absolute;
    top: 50%;
    left: 48%;
    transform: translate(-50%,-50%) rotate(45deg);
}
.inPro .cur .list .pro_btn{
    background: #fff;
}
.inPro .cur .list .pro_btn:after{
    border-color: var(--Secondary-color);
}
.inPro .js_page{
    display: none;
}
.inPro .js-scrollbar{
    width:3px;
    height:100%;
    background:transparent;
    position:absolute;
    top:0;
    z-index:9;
    cursor:pointer;
}
.inPro .js-scrollbar .swiper-scrollbar-drag{
    background:var(--Secondary-color);
}
.inPro .con:nth-child(2n+1) .js-scrollbar{
    left:0;
}
.inPro .con:nth-child(2n) .js-scrollbar{
    right:0;
}
.pro-scroll{
    position:absolute;
    bottom:10px;
    left:50%;
    transform: translateX(-50%);
    z-index: 5;
    cursor: pointer;
}
.pro-scroll svg{
    width:30px;
    height: 30px;
    fill:#fff;
    animation: scroll-icon 3s linear infinite;
}
@keyframes scroll-icon{
  0% {
    -webkit-transform:translateY(-12px);
    transform: translateY(-12px);
  }
  100% {
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
  }
}
@media screen and (max-width: 1600px) {
    .inPro .HoverIcon{
        width: 60px;
        height: 60px;
    }
    .inPro .list .con-box{
        width: calc(100% - 92px);
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media screen and (max-width: 1300px) {
    .inPro .list{
        padding: 30px 20px;
    }
    .inPro .HoverIcon{
        width: 50px;
        height: 50px;
    }
    .inPro .list .con-box{
        width: calc(100% - 82px);
    }
}
@media screen and (max-width: 1200px) {
    .inPro .list h3{
        font-size:18px;
    }
    .inPro .text{
        width:30%;
    }
    .inPro .list{
        padding: 20px 15px;
    }
    .inPro .HoverIcon{
        width: 40px;
        height: 40px;
    }
    .inPro .list .con-box{
        width: calc(100% - 72px);
    }
    .inPro .list .p{
        line-clamp: 2;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
}
@media screen and (max-width: 900px) {
    .inPro .list h3{
        font-size:16px;
    }
   .inPro .list .p{
        line-clamp: 1;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

}
@media screen and (max-width: 768px) {
    .js-scrollbar{
        display: none;
    }
    .inPro:before{
        display: none;
    }
    .inPro .pro_title h3{
        margin-bottom: 20px;
    }
    .inPro .con-inner{
        margin-left:auto!important;
        margin-right:auto!important;
    }
    .inPro .text{
        width:100%;
        position: relative;
    }
    .inPro .js_page{
        display:block;
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }
    .inPro .js_page .swiper-pagination-bullet-active{
        background: var(--Secondary-color);
    }
}
.pro-intro{
    width:100%;
    position: relative;
}
.pro-intro:before{
    content:"";
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:49%;
    background: #f5f5f5;
}
.xq-bt{
  position: relative;
  text-align: center; 
  color: #222;
  font-weight: 700;
  line-height: 1.2;
}
.xq-bt:before{
  content: "";
  position: absolute;
  bottom: 0;
  left:50%;
  transform:translateX(-50%);
  width: 50px;
  height: 5px;
  background: var(--Secondary-color);
}
.intro-box{
    width: 100%;
    display: flex;
    flex-wrap:wrap;
    align-items: flex-end;
    justify-content: space-between;
}
.intro-img{
    width: 67%;
    height: 29vw;
    max-width: 960px;
    max-height: 540px;
    position: relative;
    overflow: hidden;
}
.intro-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}
.intro-img:hover img{
    transform:scale(1.05);
}
.intro-con{
    width:27%;
}
.intro-con img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
.intro-con h3{
  color:#222;
  font-weight: 700;
  line-height: 1.2;
}
.intro-con p{
    color: #222;
    line-height: 1.8;
    text-align: justify;
   /* max-height:180px;
    overflow-y: auto; */
}
.intro-con li{
    list-style-type: square;
}
.pro-yd{
    width: 100%;
    position:relative;
}
.pro-yd > img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   position: absolute;
   top: 0;
   left:0;
   z-index: 1;
}
.pro-yd > .wrap{
    position: relative;
    z-index: 2;
}
.pro-yd .xq-bt{
    color: #fff;
}
.pro-yd .xq-bt:before{
    background: #fff;
}
.pro-yd .yd-box{
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
}
.pro-yd .yd-box .swiper{
    width:100%;
    overflow: hidden;
}
.pro-yd .yd-box .yd-con{
  width: 100%;
  height:100%;
  background: rgba(255,255,255,.1);
  padding-left: 3vw;
  padding-right: 3vw;
  position: relative;
  backdrop-filter:blur(20px);
  transition: all 0.3s ease-in-out;
}
.pro-yd .yd-box .yd-con span{
    color: rgba(255,255,255,.02);
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 160px;
    line-height: 1;
    z-index: -1;
}
.pro-yd .yd-box .yd-con .yd-icon{
    width: 42px;
    height: 42px;
    position: relative;
    margin: 0 auto;
    transition: all 0.3s ease-in-out;
}
.pro-yd .yd-box .yd-con .yd-icon img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.pro-yd .yd-box .yd-con:hover .yd-icon{
   transform: rotateY(180deg);
}
.pro-yd .yd-box .yd-con p{
    color: #fff;
    line-height: 1.8;
    text-align: center;
}
.pro-yd .yd-page{
   width:100%;
   text-align: center;
}
.pro-yd .yd-page span{
   background:rgba(255,255,255,.6);
}
.pro-yd .yd-page .swiper-pagination-bullet-active {
    background: var(--Secondary-color);
}
.pro-xq > .wrap{
   display: flex;
   flex-wrap:wrap;
   justify-content: space-between;
}
.pro-xq .xq-bt{
    text-align:left;
}
.pro-xq .xq-bt:before{
    left: 0;
    transform: none;
}
.pro-xq .pro-use{
  width: 49%;
  max-width: 700px;
}
.pro-xq .pro-use .use-box{
  width: 100%;
  height: 21vw;
  max-height: 395px;
  position: relative;
  overflow: hidden;
  box-shadow:0 0 20px rgba(0,0,0,.1) ;
}
.pro-xq .pro-use .use-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}
.pro-xq .pro-use .use-box .swiper{
    height: 100%;
}
.pro-xq .pro-use .use-box .swiper .swiper-slide {
    overflow: hidden;
}
.pro-xq .pro-use .use-box .swiper .swiper-pagination {
    bottom: 70px;
}
.pro-xq .pro-use .use-box .swiper .swiper-pagination-bullet {
    width: 40px;
    height: 5px;
    background-color: rgb(255, 255, 255);
    opacity: 1;
    border-radius: 0px;
    transition: 0.3s ease-in-out;
    box-shadow: 0px 1px 1px 0 #000000;
}
.pro-xq .pro-use .use-box .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 80px;
        height: 6px;
} 
.pro-xq .pro-use .use-box:hover img{
    transform: scale(1.05);
}
.pro-xq .use-box h4{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(229,44,23,.9);
    color: #fff;
    padding: 10px;
    font-weight: 700;
    line-height: 2;
    text-align: center;
}
.pro-xq .pro-model{
  width: 49%;
  max-width: 700px;
}
.pro-xq .pro-model .model-box{
  width: 100%;
  height: 21vw;
  max-height: 395px;
  position: relative;
  perspective:900px;
}
.pro-xq .pro-model .model-box .model{
   width: 32%;
   height: 28%;
   padding: 0 15px 0;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #222;
   line-height: 1.6;
   font-weight: 700;
   transition: all 0.3s ease-in-out;
   box-shadow:0 6px 30px rgba(0,0,0,.06);
   position: absolute;
}
.pro-xq .pro-model .model-box .model span{
    text-align:center;
    letter-spacing: 0px;
}
.pro-model .model-box .model:not(:last-child):hover{
    background: var(--Secondary-color);
    color: #fff;
}
.pro-xq .pro-model .model-box .type1{
   top: 0;
   left: 0;
   transform:rotateY(10deg);
}
.pro-xq .pro-model .model-box .type2{
   height: 27.5%;
   top: 1%;
   left: 50%;
   transform: translateX(-50%);
}
.pro-xq .pro-model .model-box .type3{
   top: 0;
   right: 0;
   transform:rotateY(-10deg);
}
.pro-xq .pro-model .model-box .type4{
   top: 50%;
   transform: translateY(-50%) rotateY(10deg);
   left: 0;
}

/**
.pro-xq .pro-model .model-box .type5{
   top: 50%;
   transform: translateY(-50%) rotateY(-10deg);;
   right: 0;
}

.pro-xq .pro-model .model-box .type6{
   left: 0;
   bottom: 0;
   transform:rotateY(10deg);
}
.pro-xq .pro-model .model-box .type7{
   height: 27.5%;
   left: 50%;
   transform: translateX(-50%);
   bottom: 1%;
}
**/

.pro-xq .pro-model .model-box .type5{
   height: 27.5%;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}
.pro-xq .pro-model .model-box .type6{
   top: 50%;
   transform: translateY(-50%) rotateY(-10deg);;
   right: 0;
}
.pro-xq .pro-model .model-box .type7{
   left: 0;
   bottom: 0;
   transform:rotateY(10deg);
}
.pro-xq .pro-model .model-box .type8{
   height: 27.5%;
   left: 50%;
   transform: translateX(-50%);
   bottom: 1%;
}
.pro-xq .pro-model .model-box .typeMore{
   height: 27.5%;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}
.pro-xq .pro-model .model-box .typeDian{
   right: 0;
   bottom: 0;
   transform:rotateY(-10deg);
}
.section .prev_next {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section .prev_next .ellipsis {
  color: #999999;
}
.section .prev_next a:hover{
  color: #222222;
}
.section .prev_next .goback {
  width: 200px;
  height: 50px;
  margin: 0 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e52c17;
  transition: all 0.3s;
}
.section .prev_next .goback a {
  color: #fff;
}
.section .prev_next .goback:hover {
  transform: translateY(-3px);
}
@media screen and (max-width: 1440px) {
    .pro-yd .yd-box .yd-con span{
        font-size: 120px;
    }
    .pro-yd .yd-box .yd-con p{
        font-size: 16px;
    }
    .pro-xq .pro-use .use-box .swiper .swiper-pagination {
    bottom: 60px;
}
}
@media screen and (max-width: 768px) {
    .xq-bt{
        padding-bottom:15px;
    }
    .xq-bt:before{
        width: 40px;
        height: 3px;
    }
    .intro-img{
        width: 100%;
        height: auto;
    }
    .intro-con{
        width: 100%;
        margin-top: 30px;
    }
    .intro-con img{
        max-width: 60px;
    }
    .pro-yd .yd-box .yd-con{
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        padding:30px;
    }
    .pro-xq .pro-use{
        width: 100%;
        max-width: 100%;
    }
    .pro-xq .pro-use .use-box{
        height: 240px;
        overflow: visible;
        margin-bottom: 30px;
    }
    .pro-xq .pro-use .use-box .swiper{
        overflow: visible;
    }
    .pro-xq .pro-use .use-box .swiper .swiper-pagination {
        bottom: -30px;
    }
    .pro-xq .pro-use .use-box .swiper .swiper-pagination-bullet {
    background: rgb(217 217 217 / 94%);
    width: 8px;
    height: 8px;
    border-radius: 15px;
    box-shadow: initial;
    }
    .pro-xq .pro-use .use-box .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--Secondary-color);
    width: 8px;
    height: 8px;
    }
    .pro-xq .pro-model{
        width: 100%;
        max-width: 100%;
        margin-top: 30px;
    }
    .pro-xq .pro-model .model-box{
        height: 260px;
    }
    .pro-xq .pro-model .model-box .model{
        height: 80px;
    }
    .section .prev_next {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
  .section .prev_next .prev {
    width: 100%;
  }
  .section .prev_next .next {
    width: 100%;
  }
  .section .prev_next .goback {
    order: 3;
    margin: 0;
  }
}