@charset "utf-8";


.pop_container {
    position: fixed; top:0; left:0; display: flex; width:100%; height: 100vh; z-index:9999; 
    background-color: rgba(0,0,0,0.5);
    justify-content: center; align-items: center;
}
.pop_container .pop_box { width:100%; max-width: 1400px; margin:0 auto; }
.pop_container h2 { padding: 0; margin: 0 0 20px 0; text-align: center; color:#fff; font-size: 35px;}
.pop_container h2 * { vertical-align: middle;}
.pop_container .swiper-wrapper { justify-content: center; padding-bottom:50px;  }
.pop_container .swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom,20px);
    top: var(--swiper-pagination-top,auto);
    left: 0;
    width: 100%
} 
.pop_container .swiper-pagination-bullet { background-color: #fff;}
.pop_container .swiper-button-next, .swiper-button-prev { color:#fff; }


div.pop_wrap {
    width:100%; max-width:500px; height: 600px; margin:0 auto;
    background-color: #fff; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); border-radius: 30px; box-sizing: border-box;
}

div.pop_head {
    width: 100%; height: 67px; background-color: #000; padding: 8px; border-radius: 30px 30px 0 0; border-top: 1px solid #000;
    display: flex; align-items: center; justify-content: space-between; padding: 0 24px; box-sizing: border-box;
}
div.pop_head>div{
    display: flex; gap: 16px; align-items: center;
}
div.pop_head h3 {
    color: #fff; font-weight: 600; font-size: 20px; margin-left: 8px; margin-right: 24px; box-sizing: border-box;
    text-overflow: ellipsis; overflow: hidden;
    white-space : nowrap; 
    /* animation: flowText 30s linear infinite; */
}
div.pop_head button.top_close svg {
    position: relative; box-sizing: border-box;
}
div.pop_head button.minimize svg {
    box-sizing: border-box; 
}
div.pop_wrap button {
    background: none; border: none; cursor: pointer; box-sizing: border-box;
}
div.pop_contents_wrap {
    max-height: 100%; height: calc(100% - 88px); overflow-y: auto;
}
div.pop_contents {
    padding: 24px 32px; box-sizing: border-box;
    word-break: keep-all !important; line-height: 150%;
    height: 100%; font-size: 16px;
}
div.pop_contents img {
    max-width: 100% !important; margin: 16px 0;
}

div.pop_btn_wrap { text-align: center; }
div.pop_btn_wrap button {
    padding:10px 16px; font-size: 16px; color: rgba(256,256,256,0.8); box-sizing: border-box;
    transition: 0.5s; line-height: 16px; cursor: pointer; border:0; font-family: inherit;
    background-color: rgba(0,0,0,0.6); border-radius: 4px;
}
div.pop_btn_wrap button:hover {
    background-color: rgba(0,0,0,0.35); color: rgba(255,255,255,1);
}


div.pop_contents_wrap::-webkit-scrollbar {
    width: 8px !important; margin-right:10px;  /* 스크롤바의 너비 */
}

div.pop_contents_wrap::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background-color: #dadada;
    border-radius: 10px;
}
div.pop_contents_wrap::-webkit-scrollbar-thumb:hover { background-color: #ccc;}
div.pop_contents_wrap::-webkit-scrollbar-thumb:active { background-color: #bbb;}
div.pop_contents_wrap::-webkit-scrollbar-track {
    background-color: rgba(255,255,255,0);  /*스크롤바 뒷 배경 색상*/
}



/* @keyframes flowText {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
} */
@media (max-width: 1280px) {
    .pop_container .swiper-wrapper { justify-content: flex-start !important; padding-bottom: 30px !important }
}

@media (max-width: 1199px) {
    .pop_container .swiper-wrapper { padding-bottom: 30px !important }
    div.pop_wrap{
        width: 500px !important; height: 650px !important;
    }
}

@media (max-width: 767px) {
    div.pop_wrap{
        width: 350px !important; height: 500px !important; border-radius: 20px !important;
    }
    div.pop_head {
        height: 50px; padding: 0 16px; border-radius: 20px 20px 0 0 ; border-top: 1px solid #000;
    }
    div.pop_head h3{
        font-size: 16px !important;
    }
    div.pop_contents{
        padding: 16px 24px !important;
    }
    .pop_container h2 { font-size:27px; }
    .pop_container .swiper-wrapper { justify-content: start; }
    .pop_container .swiper-wrapper { padding-bottom: 20px !important }
}

/* 20250520 - 추가 */
div.pop_wrap .pop_contents_wrap div.pop_contents table{
    max-width: 100% !important;
    border:1px solid #ddd !important;
}
div.pop_wrap .pop_contents_wrap div.pop_contents table td {
    padding: 12px !important;
    border-left: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
}

@media (max-height: 757px) {
  /* 세로가 767px 이하일 때 적용 */
  div.pop_wrap{
    height: calc(100vh - 190px) !important;
  }
}