.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.story3-wrapper>.storyMain{
    margin: 5% 16% 42px 16%
}
.story3-wrapper p{
  color: #5B6670;
  font-size: 24px;
  font-family: SourceHanSansCN-Regular;
  line-height: 34px;
  font-weight: 400;
  margin: 0px 0px 35px 0px;
}
.story3-wrapper>.topText{
  margin: 5% 5%;
}
.story3-wrapper>.topText>.textTitle{
  font-size: 42px;
  text-align: center;
  font-family: SourceHanSansCN-Bold;
  font-weight: bold;
  color: #003E8F;
  margin: 50px 0px 50px 0px;
} 
.story3-wrapper>.storyMain>.process>.textTitle{
  font-size: 30px;
  text-align: center;
  font-family: SourceHanSansCN-Bold;
  font-weight: bold;
  color: #003E8F;
  margin: 50px 0px 50px 0px;
} 
.story3-wrapper>.storyMain>.clearfix>.leftImg {
  position: relative;
  left: 60px;
  margin: -40px 130px 40px 0px;
  float:left;
  width: 264x;
  height: 264px;
}
.story3-wrapper>.storyMain>.process>.clearfix>.leftImg {
  margin: 0px -155px 40px 0px;
  float:left;
  width: 645px;
  height: 263px;
}
.story3-wrapper>.storyFotter>.clearfix>.leftImg {
  margin: 0px 60px 0px 0px;
  float:left;
  width: 493px;
  height: 263px;
}
.storySpan{
  color:#003E8F;
}
.storyMain>.storyBoxBG{
  margin: 25px -5% 25px -5%;
  width: 110%;
  height: auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.storyMain>.storyBoxBG>.storyBoxText{
  margin: 0 5% 0 5%;
  padding: 35px 0;
}
.storyMain>.storyBoxBG>.storyBoxText>p{
  margin: 0;
}
.story3-wrapper>.storyFotter>div{
  margin: 0% 16%;
}
.story3-wrapper>.storyFotter>.storyBoxBG{
  /* margin: 20px 16% 55px 16%;
  background-size: 100% 100%;
  background-repeat: no-repeat; */
  margin: 20px 0% 55px 0%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.story3-wrapper>.storyFotter>.storyBoxBG>.storyBoxText{
  padding: 35px 0;
  text-align: center;
  margin: 0 16%;
}
.story3-wrapper>.storyFotter>.storyBoxBG>.storyBoxText>p{
  margin: 0;
}
.story3-wrapper>.storyFotter>.storyBoxNone{
  height: 10px;
}


@media screen and (max-width: 1560px) {
  .story3-wrapper>.storyMain{
    margin: 5% 10% 42px 10%
  }
  .story3-wrapper>.storyFotter>div{
    margin: 0% 10%;
  }
  .story3-wrapper>.storyFotter>.storyBoxBG>.storyBoxText{
    margin: 0 10%;
  }
}

@media screen and (max-width: 1350px) {
  .story3-wrapper>.storyMain{
    margin: 5% 5% 42px 5%
  }
  .story3-wrapper>.storyFotter>div{
    margin: 0% 5%;
  }
  .story3-wrapper>.storyFotter>.storyBoxBG>.storyBoxText{
    margin: 0 5%;
  }
}
@media (max-width: 420px) {
  .story3-wrapper>.storyMain{
    margin: 5% 5% 30px 5%;
  }
  .story3-wrapper p{
    font-size: 18px;
    line-height: 28px;
    margin: 20px 0px 20px 0px;
  }
  .story3-wrapper>.topText>.textTitle{
    font-size: 28px;
    margin: 0px 0px 20px 0px;
  } 
  .story3-wrapper>.storyMain>.process>.textTitle{
    font-size: 24px;
    margin: 0px 0px 20px 0px;
  } 
  .story3-wrapper>.storyFotter>.storyBoxBG{
    margin: 20px 0% 20px 0%;
  }
  .storyMain>.storyBoxBG>.storyBoxText{
    padding: 20px 0;
  }
  .story3-wrapper>.storyFotter>.storyBoxBG>.storyBoxText{
    padding: 20px 0;
  }
  .story3-wrapper>.storyMain>.clearfix>.leftImg {
    float:none;
    margin: 0;
    height: 200px;
    width: 200px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(0%);
  }
  .story3-wrapper>.storyMain>.process>.clearfix>.leftImg {
    content: url(/FrontEnd/kidneyStory/stories/story3-2-1.png);
    margin: 0;
    float:none;
    width: 100%;
    height: auto;
  }
  .story3-wrapper>.storyFotter>.clearfix>.leftImg {
    content: url(/FrontEnd/kidneyStory/stories/story3-3-1.png);
    margin: 0;
    float:none;
    width: 100%;
    height: auto;
  }
}