@charset "utf-8";

/* modal */
.ws-modal-open,
.ws-modal-open body { overflow: hidden; }

.ws-modal-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,.7); opacity: 0; transition: opacity 0.25s ease;}
.ws-modal-wrap.ws-modal-visible { opacity: 1; }
.ws-modal-wrap.ws-modal-leave { opacity: 0; }

.ws-modal-outer {position:relative; flex:0 0 auto; width:100%; max-height:100%; padding:20px; overflow:auto; -ms-overflow-style:none;/* IE and Edge */ scrollbar-width:none;/* Firefox */}
.ws-modal-outer::webkit-scrollbar {display:none;}

.ws-modal-inner { position: relative; width: 100%; max-width: 70%; margin: 0 auto; background: #fff; border-radius: 20px; overflow: hidden; opacity: 0; transform: scale(0.85); transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s; padding: 40px; padding-top: 75px; }
.ws-modal-wrap.ws-modal-visible .ws-modal-inner { opacity: 1; transform: scale(1); }
.ws-modal-wrap.ws-modal-leave .ws-modal-inner { opacity: 0; transform: scale(0.85); transition-delay: 0s; }

/* 공통 header */
.ws-modal-close { display: inline-block; width: 48px; height: 48px; background-size: contain; background: url(../../images/common/pop-close.png) center no-repeat; border: none; position: absolute; right: 20px; top: 20px;}
.modal-tit { padding-bottom: 35px; font-size: var(--font-size32); font-weight: 700; line-height: 1.3em; color: #121212;}
.modal-tit.bd { padding-bottom: 15px; border-bottom: 1px solid #ddd; margin-bottom: 28px; }

/* 퀵메뉴 문의하기 */
.modal-form dl { margin-bottom: 30px; }
.modal-form dl dt { font-weight: 500; color: #121212; margin-bottom: 1.2em; margin-bottom: 10px; }
.modal-form dl dt.fz { font-size: var(--font-size20); font-weight: 600; }
.modal-form dl dd .input { height: 44px; border-radius: 4px; }
.modal-form .captcha-wrap {display:flex; gap:10px; height:44px;}
.modal-form #kcaptcha_image { border-radius: 4px; }
.modal-form .file-fx .resume-btn { display: inline-flex; height: 44px; border-radius: 4px; border: 1px solid #ddd; align-items: center; width: 156px; position: relative; background: #f9f9f9; position: relative; padding-left: 27px; }
.modal-form .file-upload { position: relative; height: 44px; }
.modal-form .files-upload-input .files-upload-btns a { height: 44px; line-height: 42px;}
.ws-modal-inner .check {text-align:center; color:#505050; font-size:16px; line-height:1.5em; margin:40px 0 33px;}
.ws-modal-inner .check a {display:inline-block; background:#fff; margin-left:6px; padding:0 10px; font-size:14px; line-height:26px; letter-spacing:-.03em; border:1px solid #ddd; font-weight: 500;}
.submit-btn { display: inline-flex; height: 70px; padding: 0 50px; border: 1px solid #505050; border-radius: 40px;  font-weight: 700; line-height: 1.2em; color: #121212; align-items: center; justify-content: center; background: transparent; font-family: var(--paperlogy); transition: .3s;}
.submit-btn:hover { background: #121212; color: #fff;}

/* 반응형 */
@media (max-width: 1024px) {
    .ws-modal-inner { border-radius: 5px; padding: 15px; padding-top:50px; }
    .ws-modal-close { width: 30px; height: 30px; right: 10px; top: 10px; background-size: contain; }
    .modal-tit { padding-bottom: 25px; }
    .modal-tit.bd { padding-bottom: 12px; margin-bottom: 20px; }
    .modal-form dl { margin-bottom: 20px; }
    .ws-modal-inner .check { margin: 25px 0; font-size: 14px; }
    .ws-modal-inner .check a { font-size: 12px; }
    .modal-form .captcha-wrap .input { flex: 1 1 auto; min-width: 0; width: 1%;}
    .submit-btn { height: 50px; padding: 0 30px;}
}

@media (max-width: 640px) {
    .ws-modal-header { padding: 25px 15px;}
}