/* 크롬 플러그인 percenty 엑박 숨김 처리 */
#percentyImageSearchModal {
  display: none !important;
}

.ui-dialog {
  font-family: 'Pretendard' !important;
}

.ui-widget.ui-widget-content {
  padding: 0;
}
.ui-dialog .ui-dialog-content {
  padding: 1.5rem !important
}
.ui-draggable .ui-dialog-titlebar {
  border: 0;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  padding: 0 !important;
  height: 45px;
  border-bottom: 1px solid #eee;
}

.ui-dialog .ui-dialog-title {
  line-height: 1.5;
  cursor: default !important;
  display: flex;
  align-items: center;
}

.ui-dialog-content #openDialogLayerMsg {
  flex: 1 1 auto;
  font-size: 17px;
  word-break: keep-all;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ui-dialog .ui-dialog-titlebar-close {
  border: 0 !important;
  rotate: 45deg;
  background-color: transparent !important;
  right: .5rem !important;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon {
  width: 1rem;
  height: 1rem;
  background-image: linear-gradient(black 0 0), linear-gradient(black 0 0);
  background-position: center;
  background-size:
    100% 2px,
    2px 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}

.ui-dialog-content #openDialogLayerMsg {
  justify-content: flex-start;
}

.ui-dialog .ui-button-wrap button {
  font-family: 'Pretendard' !important;
  font-weight: 500;
  background-color: #0164fd;
  color: white;
  border: 0;
  transition: opacity .25s;
}

.ui-dialog .ui-button-wrap button:hover{
  opacity: .9;
}

main {
  margin-bottom: 80px
}

.section-login {
  padding: 0
}

.section-login .wrapper {
  padding: 0;
  gap: 0;
  width: min(100% - 2rem, 480px);
}

.section-login h1 {
  margin-bottom: 2rem;
  font-size: clamp(24px, 3vw, 32px);
  align-items: center;
}

.section-login h1 img {
  width: 250px;
}

.section-login .wrapper>div {
  width: 100%;
  display: flex;
}

input::placeholder {
  color: #969696;
}

input[title="아이디"] {
  /* border-bottom: 0 */
  margin-bottom: -1px;
}

input[title="아이디"]:focus {
  z-index: 1;
}

input:is([type=text], [type=url], [type=password], [type=search], [type=number], [type=tel], [type=email]) {
  flex: 1 1 auto;
  height: 56px;
  border-radius: 0;
}

.section-login .buttons {
  flex-direction: column;
}

.section-login .buttons button {
  justify-content: center;
  padding: 1.5rem;
  width: 100%;
  border-radius: 0;
}

.login_form button[type="submit"] {
  height: 60px;
  background-color: #0042CF;
  color: white;
  font-size: clamp(16px, 2vw, 18px);
}


.section-login button[type="button"] {
  font-size: clamp(16px, 2vw, 18px);
  height: 60px;
  background-color: transparent;
  border: 1px solid #C2D4FE;
  color: #0042CF;
}

.section-login .links {
  justify-content: space-between;
  gap: 0;
  padding: 1rem 0 1.5rem
}

.section-login .links div {
  display: flex;
}

.section-login .links a {
  font-weight: 600;
  color: #969696;
  font-size: 14px;
}

.section-login .links a:not(:last-of-type)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: #e3e3e3;
  margin: 0 .75rem;
}

.section-login .sns {
  display: flex;
  justify-content: center;
  margin: 1.75rem 0 2.5rem;
  gap: 2.5vw;
}

.section-login .sns a {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 14px;
  color: #777;
}

.section-login .sns img {
  width: 48px;
}

.section-login .captcha {
  border: 1px solid #e3e3e3;
  flex-direction: column;
  background: white;
  margin-top: 1rem;
  gap: 0;
}

.section-login .captcha img {
  max-width: none;
}

.section-login .captcha #gcaptcha_value {
  height: 56px;
  border: 0;
  border-top: 1px solid #e3e3e3;
}

.section-login .captcha .LBD_CaptchaDiv {
  flex: 1 1 auto;
  display: flex;
  width: 100% !important;
}

.section-login .captcha .LBD_CaptchaIconsDiv {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  max-width: none;
  border-left: 1px solid #e3e3e3
}

.section-login .captcha .LBD_CaptchaIconsDiv a {
  width: 100%;
  height: 50%
}

.section-login .captcha .LBD_CaptchaIconsDiv a:first-of-type {
  border-bottom: 1px solid #f3f3f3;
}

.section-login .checkbox {
  position: relative;
  user-select: none;
}

.section-login .checkbox a {
  color: #777;
}

.section-login .checkbox input {
  position: absolute;
  opacity: 0;
}

.section-login .checkbox input:checked+label::before {
  content: "";
  opacity: 1;
  transform: scale(1);
  background: #0042CF;
  border-color: #0042CF;
}

.section-login .checkbox input:checked+label::after {
  content: "";
  border-color: white;
}

.section-login .checkbox label {
  flex: 1 1 auto !important;
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  padding: 0;
  font-weight: 600;
  color: #777;
  line-height: normal;
  transition: 0.2s color;
  cursor: pointer;
}

.section-login .checkbox label::before {
  content: "";
  border-radius: 0;
  margin-right: 3px;
  width: 24px;
  height: 24px;
  border: 1px solid #e3e3e3;
  background-color: white;
  transition: 0.2s;
}

.section-login .checkbox label::after {
  content: "";
  width: 10px;
  height: 6px;
  position: absolute;
  top: calc(50% - 2px);
  left: 9px;
  border: 2px solid #B6B6B6;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 1;
  transform: rotate(-45deg) translateY(-50%);
}

.swiper-pagination-bullet-active {
  width: 8px;
}

.swiper-pagination {
  margin: 1rem 0;
  gap: .75rem
}

.otp_form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
  margin-bottom: 2rem;
  background: #f3f6f9;
  padding: 1.5rem;
  border-radius: .5rem;
}

.otp_form p {
  font-size: clamp(17px, 2.25vw, 18px);
}

.otp_form div {
  display: flex;
  align-items: center;
  gap: 1rem
}

.otp_form input {
  height: 45px;
}

.otp_form button {
  background-color: #333;
  color: white;
  height: 45px;
  padding: .5rem 1rem;
}

@media screen and (max-width: 640px) {
  main {
    margin: 2rem 0 !important
  }
  main section {
      padding: 3vh 0 !important;
      overflow: hidden;
  }

  main section .wrapper {
    gap: 0 !important
  }
}