.spe-panel{
  width: 100%;
  height: 100vh;
}
.home-swiper{
  width: 100%;
  height: 100%;
}
.home-swiper .swiper-pagination{
  bottom: 24px!important;
}
.home-swiper .swiper-pagination-bullet{
  display: inline-block;
  width: 25px;
  height: 25px;
  opacity: 1;
  background: transparent;
  margin: 0 6.5px!important;
  font-size: 14px;
  color: #fff;
  border: none;
}
.home-swiper .swiper-pagination-bullet-active{
  font-size: 16px;
  font-weight: bold;
  background: transparent!important;
  border: none;
  padding-bottom: 5px;
  border-bottom: 2px solid #fff;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}
.home-swiper .swiper-pagination-bullet::after{
  display: none;
}
.home-swiper .swiper-pagination-bullet-active::after{
  width: 16px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
}
.next-scroll{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  z-index: 999;
  cursor: pointer;
  animation:move-bot 1s infinite;
  -webkit-animation:move-bot 1s infinite;
}
.about{
  padding: 92px 0 135px;
  background: #FAFAFA;
  background-image: url(../image/about-bg.png);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 30% 100%;
}
.about .content{
  width: 74%;
  margin-top: 89px;
}
.about .content .pic-box{
  width: 588px;
  height: 553px;
  margin-right: 45px;
}
.about .content .desc{
  flex: 1;
}
.about .content .desc .name{
  padding-bottom: 40px;
  border-bottom: 1px solid #E9E9E9;
}
.about .content .desc .txt{
  margin-top: 47px;
  line-height: 36px;
}
.watch-more{
  margin-top: 84px;
}
.watch-more img{
  margin-left: 4px;
}
.product{
  background: #ECECEC;
  padding: 130px 0 113px;
  overflow: hidden;
}
.product .container{
  position: relative;
}
.product .video{
  width: 697px;
  height: 426px;
  position: relative;
  margin-right: 20px;

}
.product .video video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.product .right-box .same-title{
  position: relative;
  margin-bottom: 30px;
}
.product .right-box .same-title .en-txt{
  color: #d1d1d1;
}

.product .right-box{
  width: 80%;
  margin-right: -30%;
  position: relative;
}
.product .right-box .show-pic .pro-swiper .swiper-slide{
  width: 523px;
  height: 320px;
  /* display: none; */
}
/* .product .right-box .show-pic ul li:nth-of-type(1),.product .right-box .show-pic ul li:nth-of-type(2){
	display: block;
} */
/* .product .right-box .show-pic ul li:first-child{
  margin-right: 18px;
} */
.product .right-box .pro-swiper{
  position: static;
}
.product .watch-more{
  margin-top: 0;
  position: absolute;
  right: 38%;
  bottom: 0;
}
.product .bottom{
  margin-top: 90px;
}
.product .bottom p{
  margin-top: 25px;
  line-height: 30px;
  width: 35%;
}
.product  .hd {
  position: absolute;
  right: 0;
  bottom: 0;
}

.product .spenext,.product .speprev{
  position: absolute;
  top: 48%;
  left: -3%;
}
.product  .speprev{
  top: 68%;
}

.middle-box{
  padding: 120px 0;
}
.middle-box .title{
  text-align: center;
}
.middle-box .title .desc{
  margin-top: 20px;
  color: #B8B8B8;
}
.middle-box  .content{
  margin-top: 70px;
}
.middle-box  .content .right-box{
  position: relative;
  width: 50%;
}
.middle-box  .content .yinhao{
  position: absolute;
  top: 0;
  left: 0;
}
.middle-box  .content .right-box .pic-box{
  text-align: right;
}
.contact-box .tel{
  width: auto;
  padding-left: 10px;
}
.middle-box  .content .right-box .txt2{
  margin: 17px 0 30px;
}
.middle-box  .content .yinhao2{
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
.contact-box .icon-box{
  width: 40px;
  height: 40px;
  background: #833E5C;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.link-tel{
  width: 109px;
  height: 40px;
  background: #833E5C;
  border-radius: 20px;
  margin-left: 30px;
  justify-content: center;
}
.link-tel img{
  margin-left: 4px;
}
.case{
  padding: 86px 0;
  background-image: url(../image/case-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.case .title,.join .title{
  text-align: center;
  position: relative;
  margin-bottom: 95px;
}
.join .title{
  margin-bottom: 65px;
}
.case .title .en-txt,.join .title .en-txt{
  margin-top: 20px;
}
.join .title .en-txt{
  color: rgba(128, 127, 127, .28);
}
.case .title .watch-more,.join .title .watch-more{
  position: absolute;
  bottom: 20%;
  right: 0;
  margin-top: 0;
}
.case-swiper .swiper-slide a{
  display: flex;
  background: #D4D4D4;
}
.case-swiper .swiper-slide a .pic-box{
  width: 971px;
  height: 537px;
}
.case-swiper .swiper-slide a .desc-box{
  width: 429px;
  height: 537px;
}
.case-swiper .swiper-slide a .desc-box .top{
  width: 100%;
  height: 198px;
  background: #833D5B;
  padding: 39px 33px;
}
.case-swiper .swiper-slide a .desc-box .top .tag{
  margin-top: 30px;
}
.case-swiper .swiper-slide a .desc-box .top .tag span{
  margin-right: 50px;
  position: relative;
}
.case-swiper .swiper-slide a .desc-box .top .tag span sup{
  position: absolute;
  top: 0;
  right: -8px;
}
.case-swiper .swiper-slide a .desc-box .bottom{
  background: #fff;
  height: 339px;
  padding: 38px 25px 35px;
  position: relative;
}
.case-swiper .swiper-slide a .desc-box .icon-box{
  position: absolute;
  top: -54px;
  left: 50%;
  width: 129px;
  height: 129px;
  background: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  text-align: center;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  padding-top: 32px;
}
.case-swiper .swiper-slide a .desc-box .desc{
  position: relative;
  line-height: 30px;
}
.case-swiper .watch-more{
  width: 109px;
  height: 40px;
  background: #E5E5E5;
  border-radius: 20px;
  justify-content: center;
  margin: 85px auto 0;
}

.case-swiper .next,
.case-swiper .prev {

  position: absolute;
  top: auto;
  bottom: 30px;
}
.case-swiper .next{
  left: 59%;
}
.case-swiper .prev {
  left: 56%;
}
.process{
  padding: 104px 0 120px;
}
.process .step-box{
  margin-top: 60px;
}
.process .step-box ul{
  display: flex;
  justify-content: space-between;
}
.process .step-box ul li {
  position: relative;
}
.process .step-box ul li::after{
  content: '';
  width: 242px;
  height: 18px;
  position: absolute;
  top: 60%;
  right: -170%;
  background-image: url(../image/process-icon.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.process .step-box ul li:last-child::after{
  display: none;
}
.process .step-box ul li .num{
  font-size: 77px;
  font-weight: bold;
  color: #B8B8B8;
  text-align: center;
}
.process .step-box ul li .icon-box{
  width: 148px;
  height: 148px;
  background: #FFFFFF;
  border: 1px dashed #B8B8B8;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  text-align: center;
  padding-top: 40px;
  position: relative;
  margin-top: -45px;
}
.process .step-box ul li .icon-box p{
  width: 100%;
  position: absolute;
  bottom: 39px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.process .contact-box{
  background-image: url(../image/tel-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 89px 0 67px;
  margin-top: 44px;
}
.process .contact-box .link-tel{
  margin: 50px auto 0;
}
.join-swiper {
  padding-bottom: 168px;
}

.join-swiper .swiper-slide a .pic-box{
  height: 340px;
  position: relative;
}
.join-swiper .swiper-slide a .pic-box::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .27);
  opacity: 0;
}
.join-swiper .swiper-slide a .desc-box{
  text-align: center;
  height: 340px;
  padding-top: 70px;
}
.join-swiper .swiper-slide a .desc-box .name{
  margin: 0 0 40px;
}

.join-swiper>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction,.news-swiper .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
  bottom: 100px;
}
.join-swiper .swiper-slide.swiper-slide-active a .pic-box,.join-swiper .swiper-slide-duplicate-active a .pic-box{
  transform: translateY(340px);
  -webkit-transform: translateY(340px);
  -moz-transform: translateY(340px);
  -ms-transform: translateY(340px);
  -o-transform: translateY(340px);
}
.join-swiper .swiper-slide.swiper-slide-active a .desc-box,.join-swiper .swiper-slide-duplicate-active a .desc-box{
  transform: translateY(-340px);
  -webkit-transform: translateY(-340px);
  -moz-transform: translateY(-340px);
  -ms-transform: translateY(-340px);
  -o-transform: translateY(-340px);
  
}
.join-swiper .swiper-slide a:hover .pic-box::after{
  opacity: 1;
}

.join-swiper .swiper-slide a:hover .desc-box{
  background: #833D5B;
  color: #fff;
}
.join-swiper .swiper-slide  a:hover .desc-box .watch-more{
  background: #fff;
  
}

.news{
  padding-top: 100px;
  background: #FAFAFA;
}
.news .same-title{
  position: relative;
}
.news .same-title .right-box{
  position: absolute;
  bottom: 20%;
  right: 0;
}
.news .same-title .right-box .watch-more{
  margin-top: 0;
  margin-left: 52px;
}
.news .same-title .right-box .hd ul li{
  margin-left: 48px;
  position: relative;
}
.news .same-title .right-box .hd ul li::after{
  content: '';
  position: absolute;
  top: 50%;
  left: -24px;
  width: 1px;
  height: 13px;
  background: #B8B8B8;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
.news .same-title .right-box .hd ul li:first-child:after{
  display: none;
}
.news-swiper .swiper-container{
  padding: 119px 0 167px;
}
.news-swiper a .pic-box{
  width: 100%;
  height: 321px;
}
.news-swiper a .desc-box{
  padding: 32px 0 26px;
  border-bottom: 1px solid #B8B8B8;
  text-align: center;
}
.news-swiper a .desc-box .date{
  color: #C8C6C6;
  margin: 15px 0 18px;
}

.news .news-swiper .swiper-slide{
  height: 427px;
}
.news .news-swiper a .hide{
  display: none;
}
.news .news-swiper{
  position: relative;
}
.news-swiper .next,
.news-swiper .prev {
  position: absolute;
  top: 40%;
}
.news-swiper .next{
  right:-25px;
}
.news-swiper .prev {
  left: -25px;
}
.news .news-swiper .swiper-slide:hover {
  height: 467px;
  
  margin-top: -40px;
}
.news .news-swiper .swiper-slide:hover a .desc-box{
  border-bottom: none;
  background: #FFFFFF;
}
.news .news-swiper  .swiper-slide:hover .hide{
  display: block;
}
.news .watch-more{
  margin-top: 0;
}

@media (max-width: 1440px) {
  .about{
    background-size: 26% 100%;
  }
  .about .content .pic-box{
    width: 500px;
    height: 500px;
  }
  .product .arrow {
    left: 38%;
  }
  .product .bottom p {
    margin-top: 25px;
    line-height: 30px;
    width: 32%;
  }
  .middle-box .content .left-pic{
    width: 50%;
  }
  .middle-box .content .left-pic img{
    width: 100%;
  }
  .case-swiper .prev {
    left: 50%;
  }
  .case-swiper .next {
    left: 55%;
  }
  .case-swiper .swiper-slide a .pic-box{
    width: 780px;
  }
  .process .step-box ul li::after{
    width: 156px;
    height: 12px;
    right: -123%;
  }
  
}
@media (max-width: 1280px) {
  .about{
    padding: 90px 0;
    background-size: 23% 100%;
  }
  .about .content{
    width: 80%;
  }
  .about .watch-more{
    margin-top: 50px;
  }
  .product .right-box {
    width: 80%;
  }
  .product .arrow {
    left: 46%;
  }
  .middle-box .content .right-box .pic-box img{
    width: 60%;
  }
  .case-swiper .swiper-slide a .pic-box{
    width: 680px;
  }
  .case-swiper .swiper-slide a .desc-box .top .tag span:last-child{
    margin-right: 0;
  }
  .case-swiper .prev {
    left: 46%;
  }
  .case-swiper .next {
    left: 52%;
  }
  .process .step-box ul li::after{
    right: -106%;
  }
}
@media (max-width: 1080px) {
  .about {
    padding: 60px 0 80px;
    background-size: 100% 100%;
  }
  .about .content{
    width: 100%;
  }
}
@media (max-width: 750px) {
  .about {
    padding: 30px 0 40px;
  }
  .about .content {
    flex-wrap: wrap;
    margin-top: 40px;
  }
  .about .content .pic-box {
    width: 100%;
    height: 200px;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .about .content .desc .name{
    padding-bottom: 20px;
  }
  .about .content .desc .txt {
    margin-top: 20px;
    line-height: 2;
  }
  .about .watch-more {
    margin-top: 30px;
  }
  .product {
    padding: 30px 0 350px;
  }
  .product .bd .show .top{
    flex-wrap: wrap;
  }
  .product .video{
    width: 100%;
    height: 200px;
    margin-right: 0;
  }
  .product .right-box{
    width: 100%;
    margin-right: 0;
    margin-top: 30px;
  }
  .product .watch-more{
    right: 0;
  }
  
  .product .right-box .show-pic .pro-swiper .swiper-slide{
    /*width: 49%;*/
    height: 200px;
  }
  .product .spenext, .product .speprev{
    top: 60%;
  }
  .product .speprev{
  	top: 80%;
  }
  .product .bottom {
    margin-top: 20px;
  }
  .product .bottom p {
    margin-top: 25px;
    line-height: 2;
    width: 100%;
  }
  .product .hd{
    bottom: -350px;
  }
  .product .hd ul{
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px;
  }
  
  .middle-box{
    padding: 30px 0;
  }
  .middle-box .content{
    margin-top: 30px;
    flex-wrap: wrap;
  }
  .middle-box .content .left-pic{
    width: 100%;
  }
  .middle-box .content .right-box {
    width: 100%;
  }
  .middle-box .content .yinhao img,.middle-box .content .yinhao2 img{
    width: 30px;
  }
  .middle-box .content .right-box .pic-box img{
    width: 80%;
  }
  .contact-box{
    flex-wrap: wrap;
  }
  .link-tel{
    margin-left: 0;
    margin-top: 20px;
  }
  .case .title .en-txt, .join .title .en-txt {
    margin-top: 10px;
  }
  .case {
    padding: 40px 0;
  }
  .case .title, .join .title{
    margin-bottom: 30px;
    text-align: left;
  }
  .case-swiper{
    padding-bottom: 40px;
  }
  .case-swiper .swiper-slide a{
    flex-wrap: wrap;
  }
  .case-swiper .swiper-slide a .pic-box{
    width: 100%;
    height: 200px;
  }
  .case-swiper .swiper-slide a .desc-box{
    width: 100%;
    height: auto;
  }
  .case-swiper .swiper-slide a .desc-box .top {

    height: auto;
    background: #833D5B;
    padding: 40px  30px;
  }
  .case-swiper .swiper-slide a .desc-box .top .name{
    font-size: 18px;
  }
  .case-swiper .swiper-slide a .desc-box .top .tag{
    font-size: 14px;
  }
  .case-swiper .swiper-slide a .desc-box .top .tag {
    margin-top: 20px;
  }
  .case-swiper .swiper-slide a .desc-box .icon-box {
    top: -24px;
    width: 80px;
    height: 80px;
    padding-top: 14px;
  }
  .case-swiper .watch-more {
    margin: 25px auto 0;
  }
  .case-swiper .prev {
    left: 22%;
    bottom: 0;
  }
  .case-swiper .next {
    left: 68%;
    bottom: 0;
  }
  .case-swiper .swiper-slide a .desc-box .bottom {
    height: auto;
    padding: 38px 25px 35px;
  }
  .process {
    padding: 44px 0 ;
  }
  .process .step-box {
    margin-top: 30px;
  }
  .process .step-box ul{
    flex-wrap: wrap;
  }
  .process .step-box ul li{
    margin-bottom: 20px;
  }
  .process .step-box ul li .num {
    font-size: 40px;
  }
  .process .step-box ul li .icon-box {
    width: 118px;
    height: 118px;
    padding-top: 20px;
    margin-top: -25px;
  }
  .process .step-box ul li::after {
    width: 90px;
    height: 8px;
    right: -80%;
  }
  .process .step-box ul li:nth-of-type(2)::after{
    display: none;
  }
  .process .contact-box {
    background-image: url(../image/tel-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding:40px 20px;
    margin-top: 0;
  }
  .process .contact-box .link-tel {
    margin: 20px auto 0;
  }
  .join-swiper{
    padding-bottom: 68px;
  }
  .join-swiper .swiper-slide a .pic-box {
    height: 200px;
  }
  .join-swiper .swiper-slide a .desc-box {
    text-align: center;
    height: 200px;
    padding-top: 30px;
  }
  .join-swiper .swiper-slide a .desc-box .name {
    margin: 0 0 20px;
  }
  .join-swiper .swiper-slide a .desc-box .watch-more, .join-lists a .desc-box .watch-more {
   
    margin: 30px auto 0;
  }
  .join-swiper .swiper-slide.swiper-slide-active a .pic-box,.join-swiper .swiper-slide-duplicate-active a .pic-box{
	  transform: translateY(0);
	  -webkit-transform: translateY(0);
	  -moz-transform: translateY(0);
	  -ms-transform: translateY(0);
	  -o-transform: translateY(0);
	}
	.join-swiper .swiper-slide.swiper-slide-active a .desc-box,.join-swiper .swiper-slide-duplicate-active a .desc-box{
	  transform: translateY(0);
	  -webkit-transform: translateY(0);
	  -moz-transform: translateY(0);
	  -ms-transform: translateY(0);
	  -o-transform: translateY(0);
	  
	}
  
  
  .join-swiper>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction, .news-swiper .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 30px;
  }
  .news {
    padding-top: 40px;
  }
  .news .same-title .right-box {
    width: 100%;
    position: absolute;
    bottom: -40px;
    right: auto;
    left: 0;
    display: flex;
    justify-content: space-between;
  }
  
  .news .same-title .right-box .hd ul li{
    margin-left:0;
    margin-right: 20px;
  }
  .news-swiper .swiper-container {
    padding: 60px 0 100px;
  }
  .news .news-swiper .swiper-slide{
    height: auto;
  }
  .news-swiper a .pic-box {
    width: 100%;
    height: 200px;
  }
  .news-swiper a .desc-box {
    padding: 26px 0 20px;
  }
  .news-swiper .prev {
    left: -15px;
  }
  .news-swiper .next {
    right: -15px;
  }
  .news .news-swiper .swiper-slide:hover {
    height: auto;
    margin-top: 0;
  }
}