/*-----------------------------------------------------------*/

/*copyright by 动力无限  www.btoe.cn*/

/*邮箱 btoe@btoe.cn*/

/*合作电话 400-0599-360*/

/*版权所有违者必究*/

/*-----------------------------------------------------------*/

.sjcTop,

.sjcTop2,

.sjcBottom,

.sjcLeft,

.sjcRight,

.bg,

.leftWow,

.rightWow,

.bottomWow {

  -webkit-transition: all 0.8s ease-out;

  transition: all 0.8s ease-out;

}









/* banner */



.banner {

  width: 100%;

  height: 100%;

  overflow: hidden;

  position: relative;

}



.banner .swiper-container {

  width: 100%;

  height: 100%;

  overflow: hidden;

  margin: 0 auto;



}



.banner .swiper-slide {

  width: 100%;

  height: 100%;

  overflow: hidden;

  position: relative;

}



.banner .swiper-slide {

  background-size: 100%;

  background-position: center;

  background-repeat: no-repeat;

}



.banner .swiper-slide img {

  width: 100%;

  height: 100%;

  display: block;

  transition:1s linear 2s;

  transform:scale(1.1,1.1);

}



.banner .swiper-slide-active img,.swiper-slide-duplicate-active img{

  transition:6s linear;

  transform:scale(1,1);

  }	



.banner .swiper-slide span{

  display: block;

  position: absolute;

  left: 110px;

  top: 380px;

  z-index: 5;

  font-size: 40px;

  color: #fff;

  font-weight: bold;

  font-family: Arial, Helvetica, sans-serif;

  line-height: 40px;



}



.banner .banner_num{

  display: block;

  position: absolute;

  left: 115px;

  top: 380px;

  z-index: 5;

  font-size: 26px;

  color: #fff;

  font-family: Arial, Helvetica, sans-serif;

  background: url(../images/banner_xt.png) no-repeat  top left;

  width: 88px;

  height: 88px;

  padding-left: 48px;

  padding-top: 50px;

}



.banner .swiper-button-next1{

  position: absolute;

  width: 65px;

  height: 65px;

  background: url(../images/bannerR.png) no-repeat  center;

  right: 5%;

  top: 50%;

  z-index: 5;

  cursor: pointer;

}



.banner .swiper-button-prev1{

  position: absolute;

  width: 65px;

  height: 65px;

  background: url(../images/bannerL.png) no-repeat  center;

  left: 5%;

  top: 50%;

  z-index: 5;

  cursor: pointer;

}



.banner .swiper-pagination {

  width: 100%;

  bottom: 80px;

  left: 0%;

}

.banner .swiper-pagination-bullets .swiper-pagination-bullet {

  margin: 0 20px;

  background: url(../images/buttom1.png) no-repeat  center;

  width: 27px;

  height: 27px;

  opacity: 1;

  border-radius: 50%;

  -webkit-transition: all 0.5s ease-out;

  -o-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  position: relative;

}

.banner .swiper-pagination-bullets .swiper-pagination-bullet-active {

  background: url(../images/buttom2.png) no-repeat  center;

}







/*about*/



.ab_bg{

  margin: 0 auto;

  width: 100%;

  height: 883px;

  background: url(../images/ab_bg.jpg) no-repeat  center;

  overflow: hidden;

  position: relative;

}



.ab_bg .ab_xt{

  position: absolute;

  left: 0px;

  top: 0px;

  padding-bottom: 200px;

  background: url(../images/buttom3.png) no-repeat bottom center;

  width: 110px;



}



.ab_bg .ab_xt i{

  display: block;

  font-size: 18px;

  color: #fff;

  writing-mode: tb-rl;

  line-height: 110px;

  margin-top: 140px;

  letter-spacing: 20px;



}



.ab_bg .about{

  margin: 0 auto;

  width: 1300px;

}



.ab_bg .about .ab_l{

  float: left;

  width: 715px;

  margin-top: 130px;

}



.ab_bg .about .ab_l .txt{

  margin-top: 95px;



}



.ab_bg .about .ab_l .txt h5{

  font-size: 25px;

  color: #333333;

  font-weight: bold;



}





.ab_bg .about .ab_l .txt p{

  font-size: 16px;

  color: #7a7a7a;

  line-height: 34px;

  overflow: hidden;

  height: 204px;

  margin-top: 35px;

}





.ab_bg .about .ab_l .txt .more{

  margin-top: 95px;

  padding-left: 68px;

  background: url(../images/more.png) no-repeat left center;

  height: 55px;

  display: block;

}



.ab_bg .about .ab_l .txt .more i{

  display: inline-block;

  font-size: 16px;

  color: #333333;

  border-bottom: 1px solid #e0e0e0;

  line-height: 40px;

}



.ab_bg .about .ab_img{

  float: right;

  margin-top: 90px;

  width: 597px;

  height: 699px;

  margin-right: -115px;

} 



.ab_bg .about .ab_img img{

  width: 597px;

  height: 699px;

  border-top-left-radius: 100px;

}





.ab_bg .ab_ico{

  position: absolute;

  right: 70px;

  top: 70px;

}













/*news*/



.news_bg{

  margin: 0 auto;

  width: 100%;

  height: 1025px;

  background: url(../images/news_bg.jpg) no-repeat bottom center;

  overflow: hidden;

  position: relative;

}



.news_bg .news{

  margin: 0 auto;

  width: 1300px;

  padding-top: 90px;

}



.news_bg .news .news_t{

  height: 149px;

}



.news_bg .news .news_t .title{

  float: left;

}



.news_bg .news .news_t .news_list{

  float: right;

  margin-top: 20px;

}



.news_bg .news .news_t .news_list ul li{

  float: left;

  margin-left: 15px;

  border-radius: 8px;

  position: relative;

  z-index: 5;

  border: 1px solid #dcdcdc;

  width: 203px;

  height: 70px;

}



.news_bg .news .news_t .news_list ul li a{

  display: block;

}



.news_bg .news .news_t .news_list ul li a em{

  display: block;

  float: left;

  border-radius: 50%;

  width: 52px;

  height: 52px;

  margin: 8px 15px 0 20px;

  -webkit-transition: all 0.5s ease-out;

  -o-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}



.news_bg .news .news_t .news_list ul li a span{

  display: block;

  float: left;

  font-size: 12px;

  color: #c2c2c2;

  font-family: Arial, Helvetica, sans-serif;

  margin-top: 11px;

  -webkit-transition: all 0.5s ease-out;

  -o-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}



.news_bg .news .news_t .news_list ul li a span i{

  display: block;

  font-size: 18px;

  color: #333;

  margin-bottom: 2px;

  -webkit-transition: all 0.5s ease-out;

  -o-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}



.news_bg .news .news_t .news_list ul li:nth-child(1) a em {

  background: #e7ecf4 url(../images/news1.png) no-repeat  center;



}



.news_bg .news .news_t .news_list ul li:nth-child(2) a em {

  background: #e7ecf4 url(../images/news2.png) no-repeat  center;



}



.news_bg .news .news_t .news_list ul li:nth-child(3) a em {

  background: #e7ecf4 url(../images/news3.png) no-repeat  center;



}



.news_bg .news .news_t .news_list ul li::after{

  position: absolute;

  left: 0;

  top: 0px;

  width: 0;

  height: 100%;

  content: "";

  z-index: -1;

  border-radius: 8px;

  background: #1367c5;

  -webkit-transition: all 0.5s ease-out;

  -o-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}



.news_bg .news .news_t .news_list ul li.on::after{

  width: 100%;

}





.news_bg .news .news_t .news_list ul li.on a span{

  color: #fff;



}



.news_bg .news .news_t .news_list ul li.on a span i{

  color: #fff;

}







.news_bg .news .news_t .news_list ul li.on:nth-child(1) a em {

  background: #ffd601 url(../images/news11.png) no-repeat  center;



}



.news_bg .news .news_t .news_list ul li.on:nth-child(2) a em {

  background: #ffd601 url(../images/news22.png) no-repeat  center;



}



.news_bg .news .news_t .news_list ul li.on:nth-child(3) a em {

  background: #ffd601 url(../images/news33.png) no-repeat  center;



}



.news_bg .news .news_box{

  margin: 0 auto;

}



.news_bg .news .news_box .news_top{

  height: 360px;

  width: 1360px;



}



.news_bg .news .news_box .news_top ul li{

  float: left;

  width: 420px;

  margin-right: 20px;



}



.news_bg .news .news_box .news_top ul li .txt{

  width: 380px;

  height: 180px;

  background: #fafafa;

  padding: 0 20px;

}



.news_bg .news .news_box .news_top ul li .txt .txt_l{

  float: left;

  width: 290px;

}



.news_bg .news .news_box .news_top ul li .txt .txt_l a{

  font-size: 18px;

  color: #333333;

  white-space: nowrap;

  text-overflow: ellipsis;

  -o-text-overflow: ellipsis;

  overflow: hidden;

  display: block;

  -webkit-transition: all 0.5s ease-out;

  -o-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  margin: 47px 0 15px 0;

}



.news_bg .news .news_box .news_top ul li .txt .txt_l p{

  font-size: 15px;

  color: #a3a3a3;

  line-height: 24px;

  height: 48px;

  overflow: hidden;



}



.news_bg .news .news_box .news_top ul li .txt .time{

  float: right;

  text-align: right;

} 



.news_bg .news .news_box .news_top ul li .txt .time span{

  display: block;

  font-size: 30px;

  color: #333333;

  font-weight: bold;

  font-family: 'Times New Roman', Times, serif;

  margin: 47px 0 42px 0;

  line-height: 30px;

}



.news_bg .news .news_box .news_top ul li .txt .time .more{

  display: block;

  font-size: 12px;

  color: #333333;

  text-transform: uppercase;

  font-family: 'Times New Roman', Times, serif;

  text-decoration: underline;

}



.news_bg .news .news_box .news_top ul li .news_img{

  margin: 0 auto;

  width: 420px;

  height: 180px;

  border-bottom-left-radius: 55px;

  overflow: hidden;

}



.news_bg .news .news_box .news_top ul li .news_img img{

  width: 420px;

  height: 180px;

  border-bottom-left-radius: 55px;

  -webkit-transition: all 0.5s ease-out;

  -o-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}



.news_bg .news .news_box .news_top ul li:hover .news_img img{

  transform: scale(1.1);



}



.news_bg .news .news_box .news_top ul li:hover .txt .txt_l a{

  color: #1367c5;

}





.news_bg .news .news_box .list{

  margin: 50px auto 0 auto;

  width: 1360px;

}



.news_bg .news .news_box .list ul li{

  float: left;

  width: 420px;

  height: 120px;

  background: #fff;

  border: 1px solid #d5d5d5;

  margin-right: 20px;

}



.news_bg .news .news_box .list ul li a{

  display: block;

  margin-left: 25px;

  width: 300px;

  float: left;

}



.news_bg .news .news_box .list ul li a span{

  font-size: 18px;

  color: #333333;

  white-space: nowrap;

  text-overflow: ellipsis;

  -o-text-overflow: ellipsis;

  overflow: hidden;

  display: block;

  -webkit-transition: all 0.5s ease-out;

  -o-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  margin: 30px 0 16px 0;

}



.news_bg .news .news_box .list ul li a i{

  display: block;

  font-size: 12px;

  color: #9c9c9c;

  font-family: Arial, Helvetica, sans-serif;

  text-transform: uppercase;

  text-decoration: underline;



}





.news_bg .news .news_box .list ul li em{

  display: block;

  float: right;

  font-size: 30px;

  color: #333;

  font-family: 'Times New Roman', Times, serif;

  font-weight: bold;

  margin: 36px 25px 0 0;

}



.news_bg .news .news_box .list ul li:hover a span{

  color: #1367c5;

}



/*footer_bg*/



.footer_bg{

  margin: -265px auto 0 auto;



}







.left {

  float: left;

}

.right {

  float: right;

}

.clearboth {

  clear: both;

}

.dl-container {

  width: 1300px;

  position: relative;

  display: block;

  margin: 0 auto;

}

.title h4 {

  font-size: 59px;

  font-family: "Times New Roman", Times, Baskerville, Georgia, serif;

  font-style: italic;

  font-weight: bold;

  line-height: 1;

}

.title h4 i {

  font-weight: bold;

  line-height: 1;

  font-style: italic;

  color: #1367c5;

  font-family: "Times New Roman", Times, Baskerville, Georgia, serif;

}

.title h3 {

  padding-top: 10px;

  font-size: 32px;

  line-height: 1;

}

.title h3 a {

  font-size: 32px;

  line-height: 1;

}

.title h3 span {

  color: #9f9f9f;

  letter-spacing: 4px;

  line-height: 1;

  padding-left: 5px;

  font-size: 18px;

  padding-left: 10px;

}

.service {

  padding-top: 114px;

}

.service .servicetitle {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.service .servicetitle .servicetitler a {

  display: flex;

  align-items: flex-end;

  align-items: center;

}

.service .servicetitle .servicetitler a u {

  width: 53px;

  height: 53px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.service .servicetitle .servicetitler a i {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 53px;

  height: 53px;

  border-radius: 50%;

  background: rgba(19, 103, 197, 0.1);

  animation: identifier 1.5s ease-out infinite forwards alternate;

}

.service .servicetitle .servicetitler a i b {

  width: 27px;

  height: 27px;

  background: #1367c5;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

}

.service .servicetitle .servicetitler a i b img {

  width: 6px;

  height: 10px;

  display: block;

}

.service .servicetitle .servicetitler a em {

  font-size: 16px;

  line-height: 2.5;

  display: block;

  margin-left: 15px;

  border-bottom: 1px solid #e0e0e0;

  -webkit-transition: 0.5s;

  transition: 0.5s;

}

.service .servicetitle .servicetitler a:hover em {

  color: #1367c5;

}

.service .serviceCenter {

  box-sizing: border-box;

  padding: 0 2px;

  margin-top: 50px;

}

.service .serviceCenter ul li {

  border: 1px solid #e0e0e0;

  box-sizing: border-box;

  padding: 20px;

  border-radius: 12px;

}

.service .serviceCenter ul li img {

  width: 100%;

  height: 160px;

  display: block;

  object-fit: cover;

  border-radius: 12px;

  overflow: hidden;

  -webkit-transition: 0.5s;

  transition: 0.5s;

}

.service .serviceCenter ul li em {

  display: block;

  text-align: center;

  padding-top: 40px;

  line-height: 1;

  font-size: 18px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  -webkit-transition: 0.5s;

  transition: 0.5s;

}

.service .serviceCenter ul li span {

  width: 94px;

  height: 34px;

  border: 1px solid #e0e0e0;

  border-top: 1px solid #fff;

  display: block;

  margin: 0 auto;

  margin-top: 20px;

  text-align: center;

  line-height: 34px;

  border-radius: 34px;

  box-shadow: 0 7px 10px 0px rgba(19, 103, 197, 0.2);

  text-transform: uppercase;

  -webkit-transition: 0.5s;

  transition: 0.5s;

}

.service .serviceCenter ul li:nth-child(2n) {

  margin-top: 50px;

}

.service .serviceCenter ul li:hover img {

  transform: scale(1.05);

}

.service .serviceCenter ul li:hover em {

  color: #1367c5;

}

.service .serviceCenter ul li:hover span {

  background: #1367c5;

  color: #fff;

}

.product {

  padding-bottom: 90px;

  margin-top: 77px;

  padding-top: 52px;

  width: 100%;

  background: url(../images/productBg.jpg) no-repeat center top;

}

.product .servicetitle {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.product .servicetitle .title h4 {

  color: #fff;

}

.product .servicetitle .title h4 i {

  color: #ffd601;

}

.product .servicetitle .title h3 a {

  color: #fff;

}

.product .servicetitle .title h3 span {

  color: rgba(255, 255, 255, 0.5);

}

.product .servicetitle .servicetitler a {

  display: flex;

  align-items: flex-end;

  align-items: center;

}

.product .servicetitle .servicetitler a u {

  width: 53px;

  height: 53px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.product .servicetitle .servicetitler a i {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 53px;

  height: 53px;

  border-radius: 50%;

  background: rgba(19, 103, 197, 0.1);

  animation: identifier 1.5s ease-out infinite forwards alternate;

}

.product .servicetitle .servicetitler a i b {

  width: 27px;

  height: 27px;

  background: #1367c5;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

}

.product .servicetitle .servicetitler a i b img {

  width: 6px;

  height: 10px;

  display: block;

}

.product .servicetitle .servicetitler a em {

  font-size: 16px;

  line-height: 2.5;

  display: block;

  margin-left: 15px;

  border-bottom: 1px solid #e0e0e0;

  -webkit-transition: 0.5s;

  transition: 0.5s;

}

.product .servicetitle .servicetitler a:hover em {

  color: #1367c5;

}

.product .productTop {

  padding-top: 86px;

  padding-bottom: 30px;

  position: relative;

}

.product .productTop li .productTopCenter {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  width: 100%;

  position: relative;

}

.product .productTop li .productTopCenter .productTopl {

  width: 400px;

  padding-top: 80px;

}

.product .productTop li .productTopCenter .productTopl .productTopltitle {

  display: block;

  font-size: 28px;

  font-weight: bold;

  padding-right: 50px;

  background: url(../images/productLico.png) no-repeat 376px 2px;

  line-height: 1;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  padding-bottom: 30px;

  border-bottom: 1px solid #333;

}

.product .productTop li .productTopCenter .productTopl p {

  text-align: justify;

  display: block;

  font-size: 18px;

  line-height: 30px;

  padding-top: 41px;

  letter-spacing: 5px;

  height: 60px;

  overflow: hidden;

}

.product .productTop li .productTopCenter .productTopl .productTopltitle2 {

  width: 136px;

  height: 50px;

  background: #1367c5;

  display: block;

  border-radius: 50px;

  text-align: center;

  line-height: 50px;

  margin-top: 64px;

  color: #fff;

  text-transform: uppercase;

  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}

.product .productTop li .productTopCenter .productTopr {

  width: 626px;

  height: 520px;

}

.product .productTop li .productTopCenter .productTopr a {

  display: block;

  width: 100%;

  height: 100%;

}

.product .productTop li .productTopCenter .productTopr a img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.product .productTop .product-pagination {

  position: absolute;

  bottom: 80px;

  left: 0;

  font-size: 20px;

  line-height: 1;

}

.product .productTop .product-pagination .swiper-pagination-current {

  font-weight: bold;

  color: #1367c5;

  font-size: 40px;

  line-height: 1;

  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}

.product .productTop .product-pagination .swiper-pagination-total {

  font-size: 20px;

  line-height: 1;

}

.product .productBottom {

  padding-top: 60px;

}

.product .productBottom ul li .productImg {

  display: block;

  width: 99.5%;

  height: 320px;

  border-radius: 10px;

  border: 1px solid #b3b3b3;

  overflow: hidden;

  -webkit-transition: 0.5s;

  transition: 0.5s;

}

.product .productBottom ul li .productImg img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: contain;

  background: #fff;

}

.product .productBottom ul li .producttext {

  margin-top: 32px;

  line-height: 38px;

  background: url(../images/productMore.png) no-repeat center right;

  width: 100%;

  padding-right: 50px;

  box-sizing: border-box;

  height: 38px;

  display: block;

  font-size: 18px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  -webkit-transition: 0.5s;

  transition: 0.5s;

}

.product .productBottom ul li:hover .productImg {

  border-color: #1367c5;

}

.product .productBottom ul li:hover .producttext {

  color: #1367c5;

}

.reason {

  width: 100%;

  height: 800px;

  background: url(../images/reason.jpg) no-repeat center;

  padding-top: 146px;

  box-sizing: border-box;

  position: relative;

}

.reason .title {

  text-align: center;

}

.reason .title h4 {

  color: #fff;

}

.reason .title h4 i {

  color: #ffd601;

}

.reason .title h3 {

  color: #9f9f9f;

  letter-spacing: 4px;

  line-height: 1;

  padding-left: 5px;

  font-size: 18px;

  padding-left: 10px;

  display: block;

  color: rgba(255, 255, 255, 0.5);

}

.reason .title h3 b {

  display: block;

  font-size: 36px;

  color: #fff;

  padding-bottom: 20px;

}

.reason .reasontop {

  padding-top: 116px;

  width: 1062px;

  margin: 0 auto;

}

.reason .reasontop ul li p {

  font-size: 18px;

  color: #fff;

  line-height: 32px;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}

.reason .reasonbottom {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

}

.reason .reasonbottom .reasonline {

  width: 100%;

  height: 1px;

  background: rgba(255, 255, 255, 0.3);

  position: absolute;

  bottom: 150px;

  left: 0;

}

.reason .reasonbottom ul {

  position: relative;

  z-index: 2;

}

.reason .reasonbottom ul li {

  cursor: pointer;

}

.reason .reasonbottom ul li img {

  height: 33px;

  display: block;

  margin: 0 auto 24px;

}

.reason .reasonbottom ul li em {

  display: flex;

  position: relative;

  justify-content: space-between;

  align-items: center;

  opacity: 0;

  -webkit-transition: 0.5s;

  transition: 0.5s;

}

.reason .reasonbottom ul li em i {

  height: 3px;

  width: 39.7%;

  background: #ffd601;

  display: block;

}

.reason .reasonbottom ul li em span {

  width: 20px;

  height: 20px;

  border: 1px solid #ffd601;

  display: block;

  border-radius: 50%;

  position: relative;

}

.reason .reasonbottom ul li em span::after {

  content: "";

  width: 9px;

  height: 9px;

  background: #ffd601;

  border-radius: 50%;

  display: block;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.reason .reasonbottom ul li p {

  text-align: center;

  font-size: 24px;

  color: #fff;

  margin-top: 38px;

}

.reason .reasonbottom ul li u {

  width: 75px;

  height: 22px;

  position: relative;

  display: block;

  margin: 44px auto 0;

}

.reason .reasonbottom ul li u::after {

  content: "";

  width: 75px;

  height: 0px;

  background: #ffd601;

  border-radius: 50%;

  position: absolute;

  bottom: -53px;

  left: 50%;

  transform: translateX(-50%);

  opacity: 0;

  -webkit-transition: 0.8s;

  transition: 0.8s;

}

.reason .reasonbottom ul li.on em {

  opacity: 1;

}

.reason .reasonbottom ul li.on u::after {

  content: "";

  opacity: 1;

  height: 75px;

}

.case {

  padding-top: 94px;

  width: 100%;

  height: 791px;

  background: url(../images/case_bg.jpg) no-repeat center right;

  box-sizing: border-box;

}

.case .title {

  position: absolute;

  z-index: 2;

  top: 36px;

}

.case span {

  display: block;

  margin-top: 15px;

}



.case .swiper-container{

  padding-bottom: 50px;

}

.case .caseBox ul li {

  -webkit-transition: 0.8s;

  transition: 0.8s;

  background: #fff;

  border-radius: 10px;

}

.case .caseBox ul li.swiper-slide-active {

  margin-top: 220px;

}

.case .caseBox ul li .caseBoxlist {

  border-radius: 10px;

  border: 1px solid #f0f0f0;

  overflow: hidden;

}

.case .caseBox ul li .caseBoxlist .productImg {

  display: block;

  width: 100%;

  height: 320px;

  -webkit-transition: 0.5s;

  transition: 0.5s;

  padding: 10px;

  padding-bottom: 0;

  box-sizing: border-box;

  overflow: hidden;

}

.case .caseBox ul li .caseBoxlist .productImg img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: contain;

  background: #fff;

  border-radius: 10px;

}

.case .caseBox ul li .caseBoxlist .producttext {

  margin-top: 20px;

  margin-bottom: 20px;

  line-height: 38px;

  background: url(../images/productMore.png) no-repeat calc(100% - 10px) center;

  width: 100%;

  box-sizing: border-box;

  height: 38px;

  display: block;

  font-size: 18px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  -webkit-transition: 0.5s;

  transition: 0.5s;

  padding: 0 10px;

  padding-right: 60px;

}

.case .caseBox ul li .caseBoxlist:hover .productImg {

  border-color: #1367c5;

}

.case .caseBox ul li .caseBoxlist:hover .producttext {

  color: #1367c5;

}

.case .caseBox .casep {

  position: absolute;

  top: 490px;

  left: 450px;

  z-index: 999999;

}

.case .caseBox .casep .casepcenter {

  position: relative;

  width: 326px;

}

.case .caseBox .casep .casepcenter .casepl {

  width: 176px;

  height: 60px;

  background: #1367c5;

  border-radius: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: absolute;

  top: -5px;

  left: 0;

  cursor: pointer;

  -webkit-transition: 0.5s;

  transition: 0.5s;

}

.case .caseBox .casep .casepcenter .casepl img {

  width: 41px;

  height: 21px;

  display: block;

}

.case .caseBox .casep .casepcenter .casepl:active {

  z-index: 2;

}

.case .caseBox .casep .casepcenter .casepr {

  width: 176px;

  height: 60px;

  background: #ffd601;

  border-radius: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: absolute;

  top: -5px;

  right: 0;

  cursor: pointer;

  -webkit-transition: 0.5s;

  transition: 0.5s;

}

.case .caseBox .casep .casepcenter .casepr img {

  width: 41px;

  height: 21px;

  display: block;

}

.case .caseBox .casep .casepcenter .casepr:active {

  z-index: 2;

}

.case .caseBox .servicetitler {

  position: absolute;

  right: 0;

  top: 490px;

  z-index: 999999;

}

.case .caseBox .servicetitler a {

  display: flex;

  align-items: flex-end;

  align-items: center;

}

.case .caseBox .servicetitler a u {

  width: 53px;

  height: 53px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.case .caseBox .servicetitler a i {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 53px;

  height: 53px;

  border-radius: 50%;

  background: rgba(19, 103, 197, 0.1);

  animation: identifier 1.5s ease-out infinite forwards alternate;

}

.case .caseBox .servicetitler a i b {

  width: 27px;

  height: 27px;

  background: #1367c5;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

}

.case .caseBox .servicetitler a i b span {

  margin-top: 0;

}

.case .caseBox .servicetitler a i b img {

  width: 6px;

  height: 10px;

  display: block;

}

.case .caseBox .servicetitler a em {

  font-size: 16px;

  line-height: 2.5;

  display: block;

  margin-left: 15px;

  border-bottom: 1px solid #e0e0e0;

  -webkit-transition: 0.5s;

  transition: 0.5s;

}

.case .caseBox .servicetitler a:hover em {

  color: #1367c5;

}

@keyframes identifier {

  0% {

    width: 44px;

    height: 44px;

  }

  100% {

    width: 53px;

    height: 53px;

  }

}