@charset "utf-8";
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*==标题↓==*/

.titleAx{ margin:30px 0; color:#191919;font-size:36px; text-align: center; font-weight: 400;}
.titleBx{color:#191919;font-size:40px;text-align:center;;padding:20px 0 50px 0; margin: 10px 0 0 0;float: left;width: 100%;border-bottom: 1px #ddd solid;}


/*==首页案例↓==*/

.HomeCase{ margin:30px 0 30px 0; border-bottom: 1px #ddd solid;}

.HomeCase .list{ margin-top:50px; display: block; width: 100%; margin: 0; float: none;}

.HomeCase .list li{ float:left; width:33.3%;border-top:1px #fff solid; border-right:1px #fff solid;}

.HomeCase .list li a{ position: relative; display: block;}

.HomeCase .list li .box{ opacity: 0; position: absolute; bottom:0; right:0;z-index: 1; width:85%; height: 80%; padding:10px 30px;background: rgba(0,174,255,0.6);    transition: all .4s ease-in-out;}

.HomeCase .list li .title{ position: absolute; left:35px; bottom:35px; color:#fff;font-size:22px;}

.HomeCase .list li .box h4{color:#fff;font-size:22px; margin:30px 0 20px 0;}

.HomeCase .list li .box p{ color:#fff;font-size:13px;line-height: 25px;}

.HomeCase .list li:hover .box{ opacity: 1}

.HomeCase .list li:hover .title{ opacity: 0}

.HomeCase .more{ display:table;margin:35px auto; color:#666666;font-size:14px; text-align: center;}

.HomeCase .more:hover{color:#00aeff}

.effect-one {
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all .7s ease-in-out;
  -moz-transition: all .7s ease-in-out;
  -o-transition: all .7s ease-in-out;
  -ms-transition: all .7s ease-in-out;
  transition: all .4s ease-in-out;
  overflow: hidden;
}
div.imgPD {
  position: relative;
  padding-top: 90%;
}
div.imgPD50 {
  position: relative;
  padding-top: 50%;
  background-color: #000000;
}
.effect-one .effect-one-img {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  opacity: 1;
  -webkit-transition: all .7s ease-in-out;
  -moz-transition: all .7s ease-in-out;
  -o-transition: all .7s ease-in-out;
  -ms-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
  overflow: hidden;
}
div.imgPD img, div.imgPD .effect-one-img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .7;
}

/*==解决方案==*/

.HomeSolution {

  margin: 50px 0 30px 0;

}

.HomeSolution .title {

  display: flex;

  justify-content: space-between;

  align-items: center;

  line-height: 70px;

  background-color: #0185f0;

  color: #ffffff;

  margin-top: 30px;

}

.HomeSolution .title h5 {

  color: #ffffff;

  font-size: 24px;

  /* flex: 200px; */

  width: 380px;

  text-align: center;

}

.HomeSolution .title p {

  color: #ffffff;

  font-size: 24px;

  /* flex: 500px; */

  width: calc(100% - 380px);

  text-align: center;

}

.HomeSolution ul{

  position: relative;

  width: 390px;

  height: 660px;

  overflow-y: auto;

  float: left;

  overflow-x: hidden;

}

.HomeSolution .contant-img {

  width: 790px;

  height: 660px;

  float: right;

  position: relative;

}

.HomeSolution li .left {

  width: 390px;

  height: 110px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 20px 10px;

  cursor: pointer;

}

.HomeSolution li>h5, .HomeSolution li>p{

  width: 100%;

}

.HomeSolution li .left>h5 {

  font-size: 16px;

  font-weight: bold;

  margin-bottom: 5px;

}

.HomeSolution li .left p{

  font-size: 14px;

  overflow: hidden;

  -webkit-line-clamp: 2;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  color: #666666;

}

.HomeSolution .right{

  width: 100%;

 /* position: absolute;

  right: 0;

  top: 0;*/

  height: 660px;

  display: none;

}

.HomeSolution .right img {

  width: 100%;

}

.HomeSolution li>div img{

  width: 100%;

  height: 100%;

}

.HomeSolution .active {

  background-color: #F9FAFC;

  border-left: 2px solid #0185f0

}

.HomeSolution .moveActive {

  background-color: #F9FAFC;

  border-left: 2px solid #0185f0

}

.HomeSolution .moveActive h5{

  color: #0185f0;

}

.HomeSolution .active h5 {

  color: #0185f0;

}

.HomeSolution .active-img {

  display: block!important;

}

@media all and (max-width:1000px){

.HomeCase{ margin:10px 0 20px 0;}

.HomeCase .list{ margin-top:30px;}

.HomeCase .list li{width:50%;}

.HomeCase .list li .logo{ height:30px;}

.HomeCase .list li .title{font-size:12px; left:10px;bottom: 10px;width:100%; text-align: center}

.HomeCase .list li .box h4{font-size:14px; margin:10px 0 10px 0;}

.HomeCase .list li .box p{ font-size:12px;line-height: 22px;}

.HomeCase .more{ display:table;margin:35px auto; color:#666666;font-size:14px; text-align: center;}

}
@media all and (max-width:760px){

.HomeCase{ margin:5px 0 20px 0;}

.HomeCase .list{ margin-top:20px;}

.HomeCase .list li{width:50%;}

.HomeCase .list li .box{padding:10px;width:70%}

.HomeCase .list li .logo{ height:25px;}

.HomeCase .list li .box h4{font-size:13px; margin:10px 0 5px 0;}

.HomeCase .list li .box p{ display: none; font-size:12px;line-height: 22px;}

.HomeCase .more{ display:table;margin:15px auto; color:#666666;font-size:14px; text-align: center;}

.HomeSolution .moveActive {

  background-color: #F9FAFC;

  border-left: 0px

}

.HomeSolution .active {

  border-left: 0px

}

.HomeSolution ul {height: 660px; width: 100%;}

.HomeSolution .title{display: none}

.HomeSolution li .right {width: 100%;height: 300px}

.HomeSolution li .left {width: 100%;padding: 20px;cursor: pointer;}

.HomeSolution .active-img {display: block!important;}

.HomeSolution .contant-img {width: 100%;height: 300px;float: right;position: relative;}

}

.wh{ width: 100%;}
.hidden{overflow: hidden;}
.container {width: 1200px;min-width: 320px;margin: auto;padding-left: 10px;padding-right: 10px;}
@media only screen and (max-width: 1440px) {
  .container {width: 1200px;}
}

@media only screen and (max-width: 1024px) {
  .container { width: 1000px;}
}

@media only screen and (max-width: 540px) {
  .container {width: 100%;}
  .titleAx{ font-size: 6vw;}
}