.solution{width:100%; margin:auto;  padding: 0px;list-style: none; display:flex; flex-wrap: wrap; align-items: center;align-content: center;  justify-content: center; position: relative }
.solution:after{content: ""; width:100%; height:100%;position: absolute;z-index: -1; right:0; top:0; background: url("../images/index/a-line.svg") no-repeat right 45%; background-size: 90% auto;opacity: 0.7; }
.solution li {width:calc(100%/4 - 100px); margin:50px; cursor: pointer; position: relative;}
.solution li:after{ content: ""; width: 100%; height:30px; position: absolute;z-index: -1; right:-40%; top:12vh; background: url("../images/index/arrow-r.svg") no-repeat right center; }
.solution li:nth-child(4):after,.solution li:last-child:after{display: none;}
.solution li .item { width: 100%; padding: 10px;display:flex; flex-wrap: wrap; align-items: center;  justify-content: center; margin: auto; border-radius:25px;border:solid 2px #e8334a;background: #fff ;box-shadow: 1px 1px  8px 3px rgba(233, 51 ,74,.3); }
.solution li figure{  width:120px;height:120px;margin: auto; padding: 10px;}
.solution li span{  width:100%;min-height: 46px; font-size: clamp(.9rem, 2.3vw, 1.125rem); color:#000e3d;font-weight: 700; line-height: 1.275rem;text-align: center;  }
 @media (max-width:1112px) {
.solution{width:100%;}	 
.solution:after{background-position:right 52%; }	
.solution li {width:calc(100%/4 - 80px); margin:50px 40px; cursor: pointer; position: relative;}
 }
  
 @media (max-width:840px) {
.solution:after{ width:100%; height:100%;  background-position:right 52%; }
.solutionl i:after{ content: ""; width: 100%; height:30px; position: absolute;z-index: -1; right:-22%; top:6vh; background: url("../images/index/arrow-r.svg") no-repeat right center; }
}
 @media (max-width:767.98px) {
.solution{width:90%; margin:auto; flex-direction: column   }
.solution:after{display: none;}
.solution li {width:200px; margin:30px auto;  }
.solution li:after{   width: 100%; height:30px;  z-index: -1; left:0; top:auto;bottom:-30px; background: url("../images/index/arrow-r.svg") no-repeat center;-moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);  }
.solutionli:nth-child(4):after{display: block;}
}


/*hover*/
.solution li .item:hover, .solution li .item:focus { background-color:rgba(233, 51 ,74,1);   animation: pulse 1s; box-shadow: 0 0 0 2em transparent;}
.solution li .item:hover figure img{ filter:invert(100%) brightness(5) grayscale(1) }
.solution li .item:hover span{color: #fff;}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(146, 148, 248, 0.4);  }
}
 
@keyframes rotate {
  0% { transform: rotate(0deg) }
  to { transform: rotate(360deg)  }
}
@keyframes rotate2 {
  0% { transform: rotate(0deg) scale(1) }
  to { transform: rotate(359deg) scale(1)  }
}

@keyframes rotateIt {
  to { transform: rotate(-360deg); }
}
.step{width:100%; margin:auto;  padding:0px 40px  100px 40px;list-style: none; }
.step li {width:100%; margin:60px auto; padding:0px 30px;background-color:#fff;border-radius: 30px;  position: relative; }
.step li:after{ content: "";  width: 150px; height:30px;  z-index:-2;position: absolute;  left:60px; top:auto;bottom:-30px; background: url("../images/index/arrow-r.svg") no-repeat center;-moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);  }
.step li:last-child:after{ display: none}

.step li .item { width: 100%; padding: 10px;display:flex; flex-wrap: wrap; align-items: center;  justify-content: center; margin: auto;   position: relative; z-index: 9}
.step li .item .icon{ width:200px; padding:20px;display:flex; flex-wrap: wrap; align-items: center;  justify-content: center; border-radius:25px;border:solid 2px #e8334a;background: #fff ;box-shadow: 1px 1px  8px 3px rgba(233, 51 ,74,.3);}
.step li .item .icon figure{  width:120px;height:120px;margin: auto; padding: 10px;}
.step li .item .icon span{  width:100%;min-height: 46px; font-size: clamp(.9rem, 2.3vw, 1.125rem); color:#000e3d;font-weight: 700; line-height: 1.275rem;text-align: center;  }

.step li .item .inner{width: calc(100% - 200px); padding: 20px 40px}
.step li .item .inner h3{font-size:1.575rem; font-weight: 700; margin-bottom: 15px; color: #e9334a }
.step li .item .inner p{font-size:1rem; font-weight: 400; line-height: 1.5rem  }
.step li:hover, .step li .item:focus { background-color:rgba(233, 51 ,74,1); animation: pulse 1s; box-shadow: 0 0 0 2em transparent;}
.step li:hover span{color:rgba(233, 51 ,74,1); }
.step li:hover .inner h3{color: #fff;}

 @media (max-width:992px) {
.step{ padding:0px 0px 100px 0px;  }
}
  @media (max-width:767.98px) {
.step li .item { padding: 20px 0px; flex-direction: column}  
.step li .item .inner{width: 100%; padding: 20px 0px}	
.step li:after{ left:25%;}
.step li .inner h3{text-align: center}
}