.black-bg {
      background-color: rgba(0, 0, 0, 0.8);
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 1049;
      display: none;
}

.black-bg.show {
      display: block;
      opacity: 1;
}

.black-bg .modal-overlayer {
      width: 90%;
      max-width: 1140px;
      min-width: 360px;
      overflow: hidden;
      border-radius: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

}

.black-bg .modal-overlayer .closeModal {
      position: absolute;
      top: calc(var(--margin-padding-8)*3);
      right: calc(var(--margin-padding-8)*3);
}

.black-bg .modal-overlayer .overlayer-header {
      font-size: 16px;
      color: #fff;
      background-color: var(--main-color2);
      padding: calc(var(--margin-padding-8)*3) 0;
}

.black-bg .modal-overlayer .overlayer-body {
      padding: calc(var(--margin-padding-8)*6) calc(var(--margin-padding-8)*4);
      min-height: 300px;
      max-height: 80vh;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      letter-spacing: -1px;
}

.black-bg .modal-overlayer .overlayer-body .overlayer-body-wrap {
      /* min-height: 300px;
      max-height: inherit; */
      overflow-y: scroll;
      overflow-x: hidden;
      width: 100%;
      height: 80%;
      padding: 0 5%;
}

.black-bg .modal-overlayer .overlayer-body h2 {
      font-size: 26px;
      color: var(--main-color1);
      margin-bottom: calc(var(--margin-padding-8)*3);
}

.black-bg .modal-overlayer .overlayer-body .overlayer-body-wrap>p {
      color: var(--gray3);
      line-height: 1.75em;
      margin-bottom: 40px;
}


.overlayer-body .authentication-area {
      width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      gap: 10px;
}

.overlayer-body .authentication-area .authentication-box {
      width: 100%;
      height: 400px;
      border: 6px solid var(--main-color2);
      border-radius: 60px;
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      background-repeat: no-repeat;
      background-position: right center;
      background-size: auto 400px;
      background-image: url('/static/images/authentication_m.png');
      
}

.overlayer-body .authentication-area .authentication-box:first-child {
      background-image: url('/static/images/auth-financ.png');
      border-radius: 0px 60px 60px 60px;
      background-size: auto 400px;
      background-position: right center;
}

.overlayer-body .authentication-area .authentication-box:last-child {
      background-image: url('/static/images/cli_authentication.png');
      border-radius: 60px 60px 0 60px;
      background-size: auto 200px;
}

.overlayer-body .authentication-area .authentication-box h3 {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      color: var(--main-color2);
      margin-bottom: 6px;
}

.overlayer-body .authentication-area .authentication-box p {
      text-align: left;
      line-height: 1.35em;
      display: flex;
      flex-direction: column ;
      align-items: flex-start;
      justify-content: flex-start;
}

.overlayer-body .authentication-area .authentication-box button {
      width: 100%;
      flex: 1 1 1;
}
.overlayer-body .authentication-area .authentication-box .btn_group{
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
}
.overlayer-body .authentication-area+.btn-box {
      padding-top: calc(var(--margin-padding-8)*4);
      margin-bottom: 0px;
}

@media screen and (max-width:768px) {
      .black-bg .modal-overlayer {
            width: 100%;
            position: unset;
            transform: translate(0,0);
            /* height: 100vh; */
            max-width: unset;
            border-radius: 0;
      }
      .black-bg .modal-overlayer .overlayer-header{
            padding:18px 0;
      }
      .black-bg .modal-overlayer .closeModal{
            top:18px;
      }
      .black-bg .modal-overlayer .overlayer-body{
            max-height: 94vh;
            padding:40px 20px;
      }
      .black-bg .modal-overlayer .overlayer-body .overlayer-body-wrap{
            padding-bottom: 50px;
            padding:0;
      }
      .overlayer-body .authentication-area {
            flex-direction: column;
            align-items: center;

      }

      .overlayer-body .authentication-area .authentication-box {
            width: 100%;
            height: 200px;
            background-position: right center;
            border-radius: 40px;
            padding: 30px 40px;
            background-size: auto 250px;
      }

      .overlayer-body .authentication-area .authentication-box:first-child {
            border-radius: 0px 40px 40px 40px;
            background-size: auto 250px;
      }

      .overlayer-body .authentication-area .authentication-box:last-child {
            border-radius: 40px 40px 0 40px;
            background-size: auto 150px;
            background-position: right center;
      }
      .overlayer-body .authentication-area .authentication-box h3 {
            flex-direction: row;
      }
      .overlayer-body .authentication-area .authentication-box button {
            max-width: unset;
            min-width: unset;
            border-radius: 100px;
      }
      .overlayer-body .authentication-area .authentication-box .btn_group{
            flex-direction: row;
      }
}

@media screen and (max-width:460px) {}