@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: 530px; margin: 0 auto; background: #fff; opacity: 0; transform: scale(0.85); transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s; border-radius: 16px; }
.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; }

/* 전자민원 본인확인 모달 */
.counsel-agree-modal > .ws-modal-close { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.counsel-agree-modal-body { display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 56px 72px; box-sizing: border-box; }
.counsel-agree-modal-top { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.counsel-agree-modal-txt { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; text-align: center; }
.counsel-agree-modal-txt .tit { color: #242424; font-size: 28px; font-weight: 700; line-height: 1.43em; }
.counsel-agree-modal-txt .receipt-msg { color: #454545; font-size: 18px; font-weight: 400; line-height: 1.78em; }
.counsel-agree-modal-txt .receipt-msg em { color: #00a3e4; font-style: normal; font-weight: 700; }
.counsel-agree-modal-txt .desc { color: #868686; font-size: 16px; font-weight: 400; line-height: 1.5em; }
.counsel-agree-modal-box { display: flex; flex-direction: column; gap: 18px; width: 100%; margin: 0; padding: 16px 24px; border-radius: 12px; background: #f8f8f8; box-sizing: border-box; text-align: left; }
.counsel-agree-modal-box .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding-bottom: 16px; border-bottom: 1px solid rgba(221,221,221,.4); }
.counsel-agree-modal-box .row:last-child { padding-bottom: 0; border-bottom: 0; }
.counsel-agree-modal-box dt { color: #454545; font-size: 16px; font-weight: 400; line-height: 1.5em; }
.counsel-agree-modal-box dd { color: #242424; font-size: 16px; font-weight: 600; line-height: 1.5em; margin: 0; }
.counsel-agree-modal-btns { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.counsel-agree-modal-btns .btn-edit,
.counsel-agree-modal-btns .btn-next { display: inline-flex; align-items: center; justify-content: center; width: 180px; height: 64px; border-radius: 12px; font-size: 18px; font-weight: 600; line-height: 1.44em; box-sizing: border-box; cursor: pointer; }
.counsel-agree-modal-btns .btn-edit { border: 1px solid #ddd; background: #fff; color: #242424; }
.counsel-agree-modal-btns .btn-next { border: 0; background: #0054a0; color: #fff; }
.counsel-agree-modal-btns .btn-edit:hover { border-color: #0054a0; color: #0054a0; }
.counsel-agree-modal-btns .btn-next:hover { opacity: .92; }

/* 반응형 */
@media (max-width: 1024px) {

}
@media (max-width: 640px) {
	.ws-modal-outer { padding-top: 40px; }
	.counsel-agree-modal-body { gap: 32px; padding: 40px 24px; }
	.counsel-agree-modal-top { gap: 28px; }
	.counsel-agree-modal-txt .tit { font-size: 22px; line-height: 1.4em; }
	.counsel-agree-modal-txt .desc { font-size: 14px; }
	.counsel-agree-modal-btns { flex-direction: column; gap: 12px; }
	.counsel-agree-modal-btns .btn-edit,
	.counsel-agree-modal-btns .btn-next { width: 100%; height: 52px; font-size: 15px; }
}
@media (max-width: 420px) {

}