.businessArea {
  height: 768px;
  width: 100%;
  position: relative;
}

.businessArea * {
  box-sizing: border-box;
}

.businessArea a {
  text-decoration: none;
}

.businessArea .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover !important;
}

.businessArea .bg1 {
  background: url(/base/plugins/html-blocks/pc/caseService/images/businessArea1.jpg) center center no-repeat;
  display: block;
}

.businessArea .bg2 {
  background: url(/base/plugins/html-blocks/pc/caseService/images/businessArea2.jpg) center center no-repeat;
  display: none;
}

.businessArea .bg3 {
  background: url(/base/plugins/html-blocks/pc/caseService/images/businessArea3.jpg) center center no-repeat;
  display: none;
}

.businessArea .bg4 {
  background: url(/base/plugins/html-blocks/pc/caseService/images/businessArea4.jpg) center center no-repeat;
  display: none;
}

.businessArea .businessAreaWrap {
  width: 1200px;
  margin-right: auto;
  margin-left: auto;
  height: 768px;
  position: relative;
  color: #fff;
}

.businessArea .left_box {
  height: 100%;
  width: 40%;
  display: flex;
  align-items: center;
}

.businessArea .left_box .infoContent {
  display: none;
}

.businessArea .left_box .infoContent:first-child {
  display: block;
}

.businessArea .left_box .infoContent .title {
  font-size: 26px;
  line-height: 66px;
  font-weight: bold;
  margin-bottom: 70px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  max-height: 66px;
}

.businessArea .left_box .infoContent .dec {
  font-size: 38px;
  line-height: 56px;
  margin-bottom: 80px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  max-height: 224px;
}

.businessArea .left_box .infoContent .more a {
  width: 140px;
  height: 45px;
  line-height: 45px;
  border: 1px solid #fff;
  font-size: 14px;
  display: block;
  text-align: Center;
  color: #fff;
}

.businessArea .right_box {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0px;
  top: 0;
  background: rgba(0, 0, 0, 0.12);
}

.businessArea .businessAreaWrap .right_box ul {
  padding: 0;
  margin: 0;
}

.businessArea .businessAreaWrap .right_box li {
  height: 192px;
  width: 100%;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.businessArea .businessAreaWrap .right_box li:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scaleY(0);
  z-index: -1;
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  background-color: rgba(255, 255, 255, 0.6);
  opacity: 0;
  visibility: hidden;
}

.businessArea .businessAreaWrap .right_box li .text_box {
  font-size: 26px;
  color: #fff;
  padding-left: 50px;
  padding-right: 50px;
  display: flex;
  align-items: center;
  height: 100%;
  width: 90%;
}

.businessArea .businessAreaWrap .right_box li .text_box .text_title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 66px;
}

.businessArea .businessAreaWrap .right_box li:hover:before,
.businessArea .businessAreaWrap .right_box li.cur:before {
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
}

.businessArea .businessAreaWrap .right_box li:hover .text_box,
.businessArea .businessAreaWrap .right_box li.cur .text_box {
  color: #008000;
}

.businessArea .left_box .infoContent .more a:hover {
  color: #008000;
  border-color: #008000;
}

.businessArea .businessAreaWrap .right_box li .icon {
  display: block;
  width: 42px;
  height: 42px;
  background: url(/base/plugins/html-blocks/pc/caseService/images/add.png) center center no-repeat #fff;
  position: absolute;
  right: 40px;
  top: 50%;
  margin-top: -22px;
  border-radius: 50%;
}
