/* 팝업 관련 */
.popup {position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,.7); z-index:9999; backdrop-filter: blur(4px);}
.popup .popup_box {position:absolute; width:calc(100% - 80px); max-width:800px; max-height:calc(100% - 80px); background:#fff; text-align:center; top:calc(100% + 10px); left:50%; transform:translateX(-50%); border-radius:10px; overflow: hidden;}
.popup .popup_box .popup_scroll {overflow-y:auto; width:100%; height:100%;}

.popup .popup_box.large {width:calc(100% - 80px); max-width:1000px; height:calc(100% - 80px); max-height:800px;}
.popup.layout_m .popup_box {width:calc(100% - 40px); max-width:unset; height:calc(100% - 40px); max-height:unset; min-width:unset;}

.popup .btn_close {font-size:2rem; color:#333; position:absolute; top:10px; right:10px; padding:0;}

.popup .popup_head {height:100px; display:flex; justify-content: center; align-items: center; flex-direction: column;}
.popup .popup_head p {line-height:1.4;}
.popup .popup_head .title {font-size:25px; font-weight:bold;}
.popup .btn_area {text-align:center; margin-top:40px; padding-bottom:40px; display:flex; gap: 10px; justify-content: center;}
.popup .submit_btn_area {padding:40px 20px; margin-top:0;}
.popup .input_block {display:block; margin-bottom:10px; position:relative;}
.popup .input_block input {width:100%; padding-right:50px;}

.popup .popup_cont {padding:0 40px;}
.popup.layout_m .popup_cont {padding:0 20px;}
.popup .popup_cont ul {border-top:1px solid #d9d9d9;}
.popup .popup_cont li {display:flex; align-items: center;}
.popup .popup_cont ul.list_head li span {display:inline-block; height:50px; line-height:50px; font-weight:bold;}
.popup .popup_cont ul.list_body li {border-bottom:1px solid #d9d9d9; margin-bottom:20px; padding:20px 0;}
.popup .popup_cont ul.list_body li:hover {cursor:pointer; background:rgba(188, 210, 238, 0.2)}
.popup .popup_cont ul.list_body li span {display:inline-block; line-height: 1.3;}

.popup .popup_cont li > div {text-align:left;}
.popup .popup_cont li > div:first-child {width:120px;}
.popup .popup_cont li > div:last-child {width:calc(100% - 120px);}
.popup .popup_cont li.no_list {justify-content: center;}


/* 동영상팝업 */
.movie_popup {display: flex; align-items: center; justify-content: center;}
.movie_popup .popup_box {width:unset; max-width:unset; background-color:rgba(255,255,255,100); width:0; height:0; top:unset; left:unset; transform:unset; overflow:unset;}
.movie_popup .popup_box .movie_screen {position:absolute; width:100%; height:100%; top:0; left:0; z-index:1; background:#fff; border-radius: 6px; opacity:1;}
.movie_popup .close_movie_popup {font-size:2rem; color:#fff; position:absolute; top: calc(100% + 20px); left: 50%; width: 50px; height: 50px; transform: translateX(-50%); border: 1px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; background:rgba(255,255,255,0);}
.movie_popup .close_movie_popup i {transform:rotate(0deg); transition:all ease .3s;}
.movie_popup .close_movie_popup:hover {background:rgba(255,255,255,.1);}
.movie_popup .close_movie_popup:hover i {transform:rotate(180deg); transition:all ease .3s;}
.movie_popup iframe {overflow:hidden; border-radius: 6px;}

/* 언어선택 팝업 */
.language_popup .popup_box {width:calc(100% - 20px); max-width:260px; padding:50px;}
.language_popup .popup_box div {margin-bottom:20px;}
.language_popup .popup_box div:last-child {margin-bottom:0;}
.language_popup .popup_box a {font-size:1.2rem;}


/* 공지팝업 */
.notice_popup {position:fixed; background:#fff; border-radius:4px; box-shadow: 2px 2px 10px rgba(0,0,0,.3); overflow:hidden;}
.notice_popup .content {overflow-y: auto;}
.notice_popup .content img {max-width:100%;}
.notice_popup .bottom_bar {background:#333; color:#fff; display: flex; align-items: center; justify-content: space-between; padding:5px 10px; cursor:move; font-size:12px;}
.notice_popup .bottom_bar .bar_area {display: flex; align-items: center;}
.notice_popup .bottom_bar .bar_area .drag_here {color:#ddd;}
.notice_popup .bottom_bar .bar_area label {font-size:12px; color:#ddd;}
.notice_popup .bottom_bar button {height:20px; line-height:18px; padding:0 5px; font-size:12px; font-weight:600; background:#ddd; border-radius:3px;}

@media screen and (max-width:768px){
  .notice_popup {max-width:calc(100% - 40px) !important; max-height:calc(100% - 40px) !important; top: 20px !important; left:20px !important;}
}

@media screen and (max-width:420px){
  .bottom_bar {display:block !important;}
  .bottom_bar .bar_area {justify-content: space-between;}
}

/* CDN 미리보기 팝업 */
.popup_cdn_preview {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:2; display:flex; justify-content: center; align-items: center; flex-direction: column;}
.popup_cdn_preview img {max-width:80%; max-height:80%;}
.preview_content {width: 1000px; height: 80% !important; background: #fff; overflow:hidden; border-radius:4px;}
.preview_content_inner {width:100%; height:100%; overflow-y: auto; padding: 20px;}
/* .img_result {margin-bottom:10px; font-size:1rem; color:#fff;} */

/* QR코드 팝업 */
#popup_qrcode {position:fixed; width:calc(100% - 2rem); height:calc(100% - 2rem); top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; z-index:1001; box-shadow:0 0 4px rgba(0,0,0,.3); padding:1rem; display:flex; align-items: center; justify-content: center; flex-direction: column;}
#popup_qrcode .qrcode_popup_subject {font-size:1.1rem; font-weight:600; margin-bottom:30px;}
#popup_qrcode #qrcode {display:flex; flex-direction: column; align-items: center; gap: 30px;}
#popup_qrcode #qrcode img {width:100%; height:100%; margin-right:0;}
#popup_qrcode .qrcode_txt {text-align:center; margin-top:1rem;}
#popup_qrcode .qrcode_txt a {color:blue;}
#popup_qrcode .qrcode_txt a:hover {text-decoration:underline;}
#popup_qrcode .qrcode_popup_btns {display:flex; gap:10px;}