@charset "UTF-8";

.common_modal {font-family: 'SUIT' !important; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; height: 100%; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity .25s ease;}
.common_modal.active {display: flex; opacity: 1;}
.common_modal_dim {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .6); touch-action: none;}
.common_modal_layer {position: relative; width: calc(100% - 32px); max-width: 480px; z-index: 2;}
.common_modal_container {position: relative; padding: 30px 15px 40px 30px; background: #fff; border-radius: 16px; overflow: hidden;}
.common_modal_header {text-align: left; padding-bottom: 20px;}
.common_modal_header img {margin-bottom: 12px;}
.common_modal_header .tit {color: #333; font-size: 24px; font-weight: 800; line-height: 120%; margin-bottom: 16px;}
.common_modal_body {max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; text-align: left; padding-right: 15px;}
.common_modal_close {position: absolute; top: 25px; right: 25px; width: 24px; height: 24px; border: 0; font-size: 0; background: url(/wp-content/uploads/image/common/modal_ico_cloase.webp) no-repeat center/24px; cursor: pointer;}

body.common_modal_lock {overflow: hidden;}
.agree_modal .common_modal_layer {position: relative; max-width: 440px;}
.agree_modal .common_modal_header {padding-bottom: 20px; border-bottom: 0.5px solid #DEDEDE;}
.agree_modal .common_modal_header .tit {color: #000; font-size: 20px; font-weight: 800; line-height: 120%;}
.agree_modal .common_modal_body {padding-top: 30px;}
.agree_modal .desc {color: #000; font-size: 14px; font-weight: 400; line-height: 130%;}
.agree_modal .desc strong {color: #ff0000; font-size: 14px; font-weight: 400; text-decoration-line: underline;}
.agree_modal .desc a {color: #000; font-size: 14px; font-weight: 400; text-decoration-line: underline;}

@media (max-width:640px) {
  .common_modal_layer {width: calc(100% - 24px); max-width: none;}
  .common_modal_container {padding: 20px;}
}

/* ui_form :  flating label 닌자폼
	- label을 floating 하는 방법
  - 일반적인 닌자폼에서도 사용 가능
  - 닌자폼 설정 > 독단적 스타일 없음으로 기본 설정 필요
  - selectbox는 제외
*/
.common_form .nf-form-content {padding: 0;}
.common_form .nf-form-fields-required {display: none;}
/* floating label*/
.common_form .field-wrap {position: relative; display: flex;}
.common_form .nf-field-label {position: absolute; top: 13px; left: 16px; pointer-events: none; transition: all 0.2s ease; z-index: 2;}
.common_form .nf-field-label label { color: #999; font-size: 14px; font-weight: 400; line-height: 130%; position: static; display: inline; width: auto; height: auto; background-color: transparent; border: none; border-radius: 0; vertical-align: baseline; cursor: default !important;}
.common_form .listselect-container .nf-field-label {top: 10px; transform: translateY(-50%);}
.common_form .listselect-container .nf-field-label label {font-size: 10px;}
.common_form .nf-field-container {margin-bottom: 10px;}
.common_form .nf-form-cont input[type="text"],
.common_form .nf-form-cont input[type="email"],
.common_form .nf-form-cont input[type="tel"],
.common_form .nf-form-cont select,
.common_form .nf-form-content textarea {height: 45px; padding: 20px 16px 7px; border-radius: 8px; border: 1px solid #E5E5E5; color: #666; font-size: 14px;}
.common_form .nf-form-content textarea {height: 90px; outline: none;}
.common_form .nf-form-content input[type=text]:focus,
.common_form .nf-form-content input[type=text]:active,
.common_form .nf-form-content input[type=tel]:focus,
.common_form .nf-form-content input[type=tel]:active,
.common_form .nf-form-content input[type=email]:focus,
.common_form .nf-form-content input[type=email]:active,
.common_form .nf-form-content textarea:focus,
.common_form .nf-form-content textarea:active,
.common_form .nf-form-content .list-select-wrap>div select:focus,
.common_form .nf-form-content .list-select-wrap>div select:active {border: 1px solid #56ACFF; border-radius: 8px; outline: none;}
.common_form input[type="text"]::placeholder,
.common_form input[type="email"]::placeholder,
.common_form input[type="tel"]::placeholder,
.common_form .nf-form-content select::placeholder,
.common_form .nf-form-content textarea::placeholder {color: transparent;}
.common_form select {appearance: none; -webkit-appearance: none; background-color: transparent;}

/* 모바일 iOS에서 select 배경색 제거 */
.common_form .nf-form-content select,
.common_form .list-select-wrap select {-webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; background-image: none;}
.common_form .list-select-wrap div div {display: block; position: absolute; top: 0; right: 16px; z-index: 1;}
.common_form .list-select-wrap div div:after {content: ""; position: relative; transform: rotateX(0deg); display: block; width: 20px; height: 45px; background: url(/wp-content/uploads/image/common/modal_ico_select.webp) no-repeat center/18px 15px; z-index: 1;}
.common_form .nf-error .ninja-forms-field {border-color: #e80000 !important;}
.common_form .field-wrap.is-active .nf-field-label {top: 10px; transform: translateY(-50%);}
.common_form .field-wrap.is-active .nf-field-label label {font-size: 10px;}
/* checkbox 스타일 */
.common_form .nf-form-content .checkbox-container {margin: 0 0 10px;}
.common_form .nf-form-content .checkbox-container.last_agree .nf-field-label {margin: 0px !important;}
.common_form .checkbox-container .nf-field-label {position: relative; top: 0; left: 0; padding-left: 0; pointer-events: all;}
.common_form .checkbox-container .nf-field-label label i {color: #B2B2B2; font-style: normal; font-size: 14px; line-height: 130%;}
.common_form .checkbox-container .nf-field-label label i.is_required {color: #56ACFf;}
.common_form .checkbox-container .nf-field-label label strong {position: relative; color: #999; font-weight: 400; cursor: pointer; text-decoration: underline; z-index: 3;}
.common_form .checkbox-container .label-right .nf-after-field {width: auto;}
.common_form .checkbox-wrap input[type=checkbox] {appearance: none; display: inline-block; width: 14px !important; height: 14px; border-radius: 2px; border: 1px solid #666; cursor: pointer; margin: 0; background-color: #fff; outline: none;}
.common_form .checkbox-wrap input[type=checkbox]:checked {border-color: #56ACFF; background: #56ACFF}
.common_form .checkbox-wrap input[type="checkbox"]:checked::after {content: ""; position: absolute; width: 5px; height: 10px; border: 3px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); left: 5px; top: 3px;}
.common_form .submit-container {margin-bottom: 0;}
.common_form .field-wrap input[type=submit],
.common_form .field-wrap input[type=submit]:hover {display: block; margin: 0 auto; width: 220px; border: 0; border-radius: 8px; padding: 12px 24px; background: #56ACFF; color: #fff; font-weight: 800; font-size: 18px; line-height: 1.3; cursor: pointer;}
.common_form .checkbox-container .field-wrap.is-active .nf-field-label {top: 0px; left: 0; transform: translateY(0%);}
.common_form .checkbox-container .field-wrap.is-active .nf-field-label label {font-size: 14px;}
.common_form .checkbox-container .nf-error .nf-error-msg {padding-left: 20px;}
.common_form .control_btn_wrap input[type=submit].control_btn {width: 100% !important; height: 45px; padding: 12px 24px; font-size: 18px; line-height: 130%;}
.common_form .nf-field-element:after {display: none;}
.common_form .ninja-forms-req-symbol {font-size: 14px; font-weight: 400; vertical-align: text-bottom;}
.common_form .nf-error-msg {color: rgba(235, 30, 30, 0.61); font-size: 14px; font-weight: 400; line-height: 130%; text-align: left;}
.common_form .nf-after-form-content .nf-error-msg {text-align: center;}