.finger {
  min-height: 60vh;
  margin-top: 30vh;
  overflow: visible;
  }
.finger .content-wrap {
  height: 350px;
  overflow: visible;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  }
.finger .content-wrap .content {
  max-width: 1170px;
  margin: 0 auto;
  overflow: visible;
  }
.finger .content-wrap .text {
  position: relative;
  height: 350px;
  margin-right: 20px;
  margin-left: 20px;
  overflow: visible;

  -ms-flex: 2;
      flex: 2;
  }
.finger .content-wrap .text > h2 {
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  font-size: 30px;
  font-weight: 400;
  color: #00be90;
  text-align: center;
  }
.finger .content-wrap .text > p {
  font-size: 16px;
  line-height: 1.8em;
  text-indent: 2em;
  }
.finger .content-wrap .mobile {
  position: relative;
  width: 300px;
  overflow: visible;
  }
.finger .content-wrap .mobile > img {
  position: absolute;
  bottom: -9px;
  left: 0;
  width: 100%;
  }
.finger .content-wrap .code {
  -ms-flex: 1;
      flex: 1;
  }
.finger .content-wrap .code > img {
  width: 100%;
  margin: 30px;
  }
@media (max-width: 768px) {
  .finger {
    min-height: 80vh;
    margin-top: 20px;
    }
  .finger > div {
    overflow: visible;
    }
  .finger h2 {
    padding-left: 15px;
    margin-bottom: 30px;
    font-weight: 400;
    color: #069;
    text-align: center;
    }
  .finger img {
    width: 100%;
    }
  .finger .bottom {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 20px;
    overflow: visible;
    text-align: justify;
    border: none;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    }
  .finger .bottom > div {
    margin-top: 20px;
    }
  .finger .bottom .text {
    font-size: 16px;
    line-height: 1.8em;
    text-indent: 2em;
    }
  .finger .bottom img {
    width: 80%;
    }
  .finger .bottom .mobile,
  .finger .bottom .code {
    text-align: center;
    }
  }