/* 팝업 CSS */
.popup_wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 15;
    overflow: auto;
}
.popup {
    max-width: 530px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.popup_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    font-size: 16px;
    font-weight: 600;
    padding: 5px 10px;
    background-color: #E4E4E4;
}
.popup_title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 24px;
    font-weight: 600;
    padding: 10px;
    background-color: #024082;
    max-width: 100%;
}
.popup_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 540px;
    background-color: #fff;
    max-width: 100%;
}


.popup_contents img {
    max-width: 500px;
}

.contents_info {
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    color: #004EA2;
    padding: 15px 0;
}

.blue {
    color: #004EA2;
}

.popup_info {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    font-weight: 600;
}

.connect_btn {
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 200px;
    height: 50px;
    font-size: 20px;
    border-radius: 30px;
    background-color: #1F7ED8;
    cursor: pointer;
}

.connect_btn a {
    color: #fff;
}

.popup_close {
    display: flex;
    justify-content: right;
    padding: 5px 15px 5px 0;
    font-size: 16px;
    font-weight: 600;
    background-color: #E4E4E4;
}

.popup_close span {
    cursor: pointer;
}


@media screen and (max-width:510px) {
  .popup {
    width: 425px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .popup_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    font-size: 16px;
    font-weight: 600;
    padding: 5px 10px;
    background-color: #E4E4E4;
  }
  .popup_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 540px;
    background-color: #fff;
    max-width: 100%;
  }
  .popup_close {
    display: flex;
    justify-content: right;
    padding: 5px 15px 5px 0;
    font-size: 16px;
    font-weight: 600;
    background-color: #E4E4E4;
    max-width: 100%;
  }
  .popup_contents img {
    max-width:100%;
  }
}
@media screen and (max-width:435px) {
  .popup {
    width:360px;
  }
  .popup_info span {
    font-size: 14px;
  }
  .popup_contents {
    height: 450px;
  }
  .popup_content_img {
    max-width: 80% !important;
  }
}
@media screen and (max-width:370px) {
  .popup {
    width:320px;
  }
}

@media screen and (max-height:840px) {
  .popup_contents {
      height: 415px;
      padding: 0px 10px;
      gap: 0px;
  }
  .popup_info span {
    font-size: 14px;
  }
  .popup_content_img {
  max-width: 80% !important;
  }
}
@media screen and (max-height:580px) {
  .popup_contents {
      height: 375px;
      padding: 0px 10px;
      gap: 0px;
  }
  .popup_info span {
    font-size: 14px;
  }
  .popup_content_img {
    max-width: 80% !important;
  }
}