@media only screen and (max-width: 600px) {
  .headerBox .box {
    width: 70px;
    height: 70px;
    padding: 18px 15px;
  }
  .headerBox .box p{
    font-size: 10px;
  }

  .registrationSection .headerBox .sideGap.box {
    margin-left: 31px;
  }

  .registrationSection .headerBox .middleBox.box.active::before {
    width: 20px;
    left: -19px;
    top: 42%;
  }
  .registrationSection .headerBox .middleBox.box::before {
      width: 17px;
      left: -14px;
      top: 42%;
  }
  .headerBox .firstBox.box::after {
        width: 20px;
        right: -19px;
        top: 42%;
    }
  .registrationSection .headerBox .middleBox.box.active::after {
    width: 18px;
    right: -17px;
    top: 42%;
  }
  .registrationSection .headerBox .middleBox.box::after {
    width: 14px;
        right: -12px;
        top: 42%;
}







.credentialPage .boxFlex {
  flex-direction: column-reverse;
}
.credentialPage .boxFlex .left{
  width: 100%;
  background-position: 74% 10%;
}
.credentialPage .boxFlex .leftContent .overlay {
    height: 100%;
}
.credentialPage .boxFlex .right{
  width: 100%;
}
.credentialPage .right .overlay {
    padding: 37px 0;
    height: 100%;
}

.card.stepCard {
  overflow-x: scroll;
}
.stepCard .headerBox {
    padding: 20px 10px;
}
.stepCard .headerBox .sideGap.box {
    margin-left: 25px;
}
.stepCard .headerBox .box {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 21px 0px;
}
.stepCard .headerBox .box p {
    font-size: 10px;
}


.stepCard .headerBox .middleBox.box::before {
   width: 14px;
    left: -13px;
}
.stepCard .headerBox .firstBox.box::after {
            right: -26px;
            width: 27px;
}
.stepCard .headerBox .middleBox.box.active::before {
    width: 16px;
    left: -13px;
}
.stepCard .headerBox .middleBox.box.active::after {
    width: 14px;
    right: -13px;
}
.stepCard .headerBox .middleBox.box::after {
    width: 13px;
    right: -12px;
}

.stepCard .headerBox .lastBox.box::before {
    width: 15px;
    left: -13px;
}






.paymentContentBox .emojiWrap img {
    width: 76px;
        height: 77px;
}
.paymentContentBox .emojiWrap h3 {
    font-size: 36px;
    font-weight: 100;
    margin-left: 10px;
    line-height: 1.1;
}
.paymentContentBox .paymentDetail .left p, .paymentContentBox .paymentDetail .right p {
    font-size: 12px;
    margin-bottom: 4px;
    text-align: center;
}
.paymentContentBox .needHelpDetail .content {
    font-size: 12px;
}
.paymentContentBox .needHelpDetail h5 {
    font-size: 12px;
}

}