@charset "UTF-8";
.popup-container {
  display: none;
  /**********************************************
  	로그인 팝업 (문의하기)
  	:: pc - popup / mobile - all page 디자인
  **********************************************/
}
.popup-container.active {
  display: block;
}
.popup-container .content {
  max-width: 754rem;
  width: calc(100% - 32rem);
  background: #fff;
  border-radius: var(--edm-radius3);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 40rem;
}
.popup-container .content .close {
  position: absolute;
  top: 40rem;
  right: 40rem;
  width: 32rem;
  height: 32rem;
  background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/popup-closeBtn-32.svg") no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
.popup-container .content .body {
  max-height: calc(100dvh - 200rem);
  height: calc(var(--vh, 1vh) * 100 - 200rem);
  overflow-y: auto;
  height: 574rem;
}
.popup-container .content .body::-webkit-scrollbar {
  display: block;
  width: 8rem;
}
.popup-container .content .body::-webkit-scrollbar-thumb {
  background: #E2E2E5;
  border-radius: var(--edm-radiusFull);
}
.popup-container .content .body::-webkit-scrollbar-track {
  background: var(--edm-bg-neutral);
}
.popup-container#auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1001;
}
.popup-container#auth-modal .content {
  max-width: 560rem;
  text-align: center;
}
.popup-container#auth-modal .content .close {
  position: static;
  margin: 0 0 0 auto;
}
.popup-container#auth-modal .content .title {
  font: var(--edm-f-h1);
  margin-top: 4rem;
}
.popup-container#auth-modal .content .sub-title {
  margin-top: 8rem;
  color: var(--edm-color-text-2);
  font: var(--edm-f-body1);
  font-weight: 400;
}
.popup-container#auth-modal .content .body {
  max-height: calc(100dvh - 310rem); /*height: calc(var(--vh, 1vh) * 100 - 310rem);*/
}
.popup-container#auth-modal .content .body .tit {
  font: var(--edm-f-body2);
  font-weight: 400;
  color: var(--edm-color-text-3);
}
.popup-container#auth-modal .content .body .sns-login {
  margin-top: 40rem;
}
.popup-container#auth-modal .content .body .sns-login .tit {
  margin-bottom: 12rem;
}
.popup-container#auth-modal .content .body .sns-login .kakao {
  width: 100%;
  height: 56rem;
  background-color: #FEE202;
}
.popup-container#auth-modal .content .body .sns-login .kakao i {
  width: 24rem;
  height: 24rem;
  margin-right: 4rem;
}
.popup-container#auth-modal .content .body .sns-login .kakao:hover {
  background-color: #FECC02;
}
.popup-container#auth-modal .content .body .other-login {
  margin-top: 40rem;
}
.popup-container#auth-modal .content .body .other-login .tit {
  position: relative;
  margin-bottom: 40rem;
}
.popup-container#auth-modal .content .body .other-login .tit::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--edm-color-border-neutral);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.popup-container#auth-modal .content .body .other-login .tit span {
  background-color: #fff;
  position: relative;
  z-index: 1;
  padding: 0 12rem;
}
.popup-container#auth-modal .content .body .other-login .normal-login .normal-tit {
  font: var(--edm-f-h3);
  text-align: left;
  margin-bottom: 12rem;
}
.popup-container#auth-modal .content .body .other-login .normal-login label {
  display: block;
}
.popup-container#auth-modal .content .body .other-login .normal-login label + label {
  margin-top: 12rem;
}
.popup-container#auth-modal .content .body .other-login .bottom-box {
  margin-top: 12rem;
  justify-content: space-between;
}
.popup-container#auth-modal .content .body .other-login .bottom-box input[type=checkbox] + span {
  font-weight: 400;
  color: var(--edm-color-text-2);
}
.popup-container#auth-modal .content .body .other-login .bottom-box .right {
  font: var(--edm-f-body2);
  font-weight: 400;
  color: var(--edm-color-text-2);
}
.popup-container#auth-modal .content .body .other-login .bottom-box .right a + a {
  margin-left: 21rem;
  position: relative;
}
.popup-container#auth-modal .content .body .other-login .bottom-box .right a + a::before {
  content: "";
  width: 1px;
  height: 15rem;
  background-color: var(--edm-color-border-neutral);
  position: absolute;
  top: 50%;
  left: -10rem;
  transform: translateY(-50%);
}
.popup-container#auth-modal .content .body .bottom {
  margin-top: 40rem;
}
.popup-container#auth-modal .content .body .bottom .shortcut {
  width: 100%;
}
.popup-container#auth-modal .content .body .bottom .join {
  text-decoration: underline;
  color: var(--edm-color-text-2);
  font: var(--edm-f-body2);
  font-weight: 400;
  margin-top: 12rem;
}

/************************************
	popup video
************************************/
#popup-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
}
#popup-video .inner-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 930rem;
  aspect-ratio: 16/9;
  z-index: 2;
  max-width: calc(100% - 32rem);
  max-height: 80vh;
}
#popup-video .inner-video iframe {
  width: 100%;
  height: 100%;
}
#popup-video .inner-video .btn-close {
  background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/popup-close-40.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 40rem;
  height: 40rem;
  position: absolute;
  top: -52rem;
  right: 0;
}
#popup-video .inner-video.short {
  width: 400rem;
  aspect-ratio: 9/16;
}
#popup-video .dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

/************************************
	modal-popup
************************************/
.modal-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s ease, opacity 0.3s ease;
  touch-action: none;
  pointer-events: none;
}
.modal-popup .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  width: 754rem;
  height: calc(100dvh - 100rem);
  height: calc(var(--vh, 1vh) * 100 - 100rem);
  max-height: 703rem;
  z-index: 2;
  max-width: calc(100% - 32rem);
  padding: 40rem;
  background-color: #fff;
  border-radius: var(--edm-radius3);
  transition: transform 0.5s ease;
  display: flex;
  flex-direction: column;
}
.modal-popup .inner .btn-close {
  background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/popup-closeBtn-32.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 32rem;
  height: 32rem;
  position: absolute;
  top: 40rem;
  right: 40rem;
}
.modal-popup .inner .titleWrap {
  font: var(--edm-f-h4);
  font-weight: 700;
  margin-bottom: 16rem;
  padding-right: 32rem;
}
.modal-popup .inner .textWrap {
  font: var(--edm-f-body2);
  font-weight: 400;
  color: var(--edm-color-text-2);
  flex: 1 1 auto;
}
.modal-popup .inner .textWrap .imgWrap {
  border-radius: var(--edm-radius4);
  overflow: hidden;
}
.modal-popup .inner .textWrap .imgWrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.modal-popup .inner .textWrap .imgWrap + .txt {
  margin-top: 16rem;
}
.modal-popup .dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
.modal-popup.active {
  visibility: visible;
  opacity: 1;
  touch-action: auto;
  pointer-events: auto;
}
.modal-popup.active .inner {
  transform: translate(-50%, -50%);
}
.modal-popup[data-modal-name=kakao-id-guide] .inner {
  min-height: unset;
  height: unset;
  max-height: 80dvh;
  max-height: calc(var(--vh, 1vh) * 80);
}
.modal-popup[data-modal-name=kakao-id-guide] .inner .scrollWrap {
  display: flex;
  justify-content: center;
}
.modal-popup[data-modal-name=kakao-id-guide] .inner .scrollWrap .imgWrap * {
  max-width: 100%;
}
.modal-popup[data-modal-name=instagram] .inner {
  width: 612rem;
  padding: 32rem;
  max-height: 816rem;
}
.modal-popup[data-modal-name=instagram] .inner .btn-close {
  top: -52rem;
  right: 0;
  width: 40rem;
  height: 40rem;
  background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/popup-closeBtn-white-40.svg");
}
.modal-popup[data-modal-name=instagram] .inner .instagram-media {
  min-width: 100% !important;
}
.modal-popup[data-modal-name=instagram] .inner .scrollWrap {
  position: relative;
}
.modal-popup[data-modal-name=instagram] .inner .scrollWrap .scroll-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75rem;
  background: linear-gradient(to top, #fff, transparent);
  touch-action: none;
  pointer-events: none;
}
.modal-popup[data-modal-name=instagram] .inner .scrollWrap.scroll-end .scroll-gradient {
  display: none !important;
}

@media screen and (max-width: 991px) {
  /************************************
  	popup video
  ************************************/
  #popup-video .btn-close {
    top: -48rem;
    right: 0;
  }
  #popup-video .inner-video.instagram .scrollWrap::after {
    display: block;
  }
  /************************************
  	modal-popup
  ************************************/
  .modal-popup .inner {
    max-height: 517rem;
    border-radius: var(--edm-radius3);
    padding: 24rem;
  }
  .modal-popup .inner .btn-close {
    width: 24rem;
    height: 24rem;
    background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/popup-closeBtn-24.svg");
    top: 24rem;
    right: 24rem;
  }
  .modal-popup .inner .titleWrap {
    padding-right: 24rem;
  }
  .modal-popup .inner .textWrap {
    position: relative;
  }
  .modal-popup .inner .textWrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75rem;
    background: linear-gradient(to top, #fff, transparent);
    touch-action: none;
    pointer-events: none;
  }
  .modal-popup .inner .textWrap .scroll {
    padding-right: 0;
  }
  .modal-popup .inner .textWrap .scroll::-webkit-scrollbar {
    display: none;
  }
  .modal-popup .inner .textWrap .imgWrap {
    border-radius: var(--edm-radius3);
  }
  .modal-popup .inner .textWrap.scroll-end::after {
    display: none !important;
  }
  .modal-popup.instagram .inner {
    padding: 16rem;
    max-height: 80dvh;
  }
  .modal-popup.instagram .inner .btn-close {
    top: -52rem;
    right: 0;
    width: 32rem;
    height: 32rem;
    background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/popup-closeBtn-white-40.svg");
  }
}
@media screen and (max-width: 575px) {
  .popup-container {
    /**********************************************
    	로그인 팝업 (문의하기)
    	:: pc - popup / mobile - all page 디자인
    **********************************************/
  }
  .popup-container .content .body {
    max-height: 100%;
    height: 100%;
  }
  .popup-container .content .body::-webkit-scrollbar {
    display: none;
  }
  .popup-container .content .body::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75rem;
    background: linear-gradient(to top, #fff, transparent);
    touch-action: none;
    pointer-events: none;
  }
  .popup-container .content .body.scroll-end::after {
    display: none !important;
  }
  .popup-container#auth-modal {
    height: calc(100dvh - 76rem);
    height: calc(var(--vh, 1vh) * 100 - 76rem);
    top: 76rem;
  }
  .popup-container#auth-modal .dim {
    display: none;
  }
  .popup-container#auth-modal .content {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 32rem 16rem 27rem;
  }
  .popup-container#auth-modal .content .close {
    display: none;
  }
  .popup-container#auth-modal .content .body {
    max-height: calc(100% - 90rem);
  }
  .popup-container#auth-modal .content .body .title + p {
    font: var(--edm-f-body2);
    font-weight: 400;
    color: var(--edm-color-text-3);
  }
  .popup-container#auth-modal .content .body .sns-login {
    margin-top: 32rem;
  }
  .popup-container#auth-modal .content .body .sns-login .shortcut {
    height: 48rem;
    line-height: 48rem;
    border-radius: var(--edm-radius2);
    font: var(--edm-f-h5);
    font-weight: 400;
  }
  .popup-container#auth-modal .content .body .sns-login .shortcut i {
    width: 16rem;
    height: 16rem;
  }
  .popup-container#auth-modal.quickMenu-length .content .body {
    max-height: calc(100% - 173rem);
  }
  .popup-container#auth-modal.quickMenu-length .content .body::after {
    bottom: 90rem;
  }
}

/*# sourceMappingURL=popup.css.map */