.captcha-section { 
  display: flex; align-items: center; padding: 15px 5px;
  .content {
    flex-basis: 100%;
    .captcha-wrap {
      position: relative; display: flex; grid-gap: 5px; gap: 5px; margin-bottom: 10px;
      .img-area { 
        max-height: 80px; overflow: hidden;
      }
      .btn-area {
        > button {
          position: relative; display: block; padding: 7px 7px 7px 22px; font-size: 1.3rem; line-height: 1; border-radius: 3px; background-color: transparent;
          &:hover {
            background-color: #eee;
          }
          &:after {
            content: ''; display: block; width: 14px; height: 14px; position: absolute; top: 6px; left: 5px; opacity: .7;
          }
          &.refresh {
            &:after {
              background-image: url('../../../img/common/refresh.svg');  background-size: cover;
            }
          }
        }
      }
    }
  }
}

.hidden { 
  position: absolute; width: 1px; height: 1px; overflow: hidden;
}


@media (max-width: 768px) {

  .captcha-section {
    .captcha-wrap {
      gap: 10px;
      .btn-area {
        > button {
          padding: 13px 15px 13px 22px;
          &:after {
            top: 13px;
          }
        }
      }
    }
  }
}

@media (max-width: 580px) {

    .captcha-section { 
      display: block; padding: 20px 0;
      .content {
        .captcha-wrap {
          display: block;
          .btn-area {
            display: flex; border: 1px solid var(--line-color); margin-top: 5px;
            > button {
              width: 100%; border-radius: 0; text-align: left; padding: 10px 15px 10px 30px;
              &:after {
                top: 9px; left: 10px;
              }
              &:not(:last-child) {
                border-right: 1px solid var(--line-color);
              }
            }
          }
        }
      }
    }
  }