/* form 의 fragment 를 가져다가 사용합니다. */
form#inquiry-form {margin-top: 30px; border-top: solid 1px #e2ecff; padding-top: 50px;}
form#inquiry-form > div {display: grid; grid-template-columns: auto 78%; justify-content: space-between; align-items: start;}
form#inquiry-form > div ~ div {margin-top: 50px;}
form#inquiry-form > div .title {display: flex; flex-direction: column; height: 40px; gap: 5px; justify-content: center;}
form#inquiry-form > div .title > p {font-weight: 500; font-size: 17px; letter-spacing: -0.54px; color: #282828; line-height: 40px; display: flex; align-items: center;}
form#inquiry-form > div .title > p span.red-dot {position: relative;}
form#inquiry-form > div .title > p span.red-dot:after {content: '*'; font-weight: 500; font-size: 18px; color: #ff0000; position: absolute; top: 0; right: -10px;}
form#inquiry-form > div:first-child .title > p {line-height: normal;}
form#inquiry-form > div .title .sub {display: flex; align-items: center; gap: 5px; font-weight: 400; font-size: 14px; letter-spacing: -0.03em; color: #727272;}
form#inquiry-form > div .title .sub small {font-size: inherit;}
form#inquiry-form > div .title .sub input[type=checkbox] {width: 18px; height: 18px; border-radius: 3px; border: solid 1px #adaeb4; background: #fff; cursor: pointer;}
form#inquiry-form > div .title .sub input[type=checkbox]:checked { border-color: #366cf1; background: url('/images/common/form/ic_check.svg') no-repeat #fff; background-size: cover;}

/* 담당자 영역 */
form#inquiry-form .form-contact-wrap > div:not(.title) {display: flex; flex-direction: column;}
form#inquiry-form .form-contact-wrap > div:not(.title) input {width: 100%; height: 40px; border: solid 1px #d8e3ef; border-radius: 5px; padding: 0 15px; font-size: 14px; color: #333}
form#inquiry-form .form-contact-wrap > div:not(.title) input ~ input {margin-top: 10px;}
form#inquiry-form .form-contact-wrap > div:not(.title) input::placeholder {color: #707070;}

/* 캡챠 영역 */
form#inquiry-form .form-captcha-wrap #div_captcha {display: grid; column-gap: 10px; grid-template-areas: "captcha text" "captcha textinput"; grid-template-columns: min-content 1fr;}
form#inquiry-form .form-captcha-wrap #div_captcha p {grid-area: text; font-size: 13px; }
form#inquiry-form .form-captcha-wrap #div_captcha #captcha-input-wrap {grid-area: textinput; align-self: end; max-width: 250px;}
form#inquiry-form .form-captcha-wrap #div_captcha input {border: solid 1px #d8e3ef; border-radius: 5px; padding: 0 15px; font-size: 14px; color: #333; width: 100%; height: 40px;}
form#inquiry-form .form-captcha-wrap #div_captcha #captcha-wrap {grid-area: captcha; display: flex; border-radius: 3px; border: solid 1px #d8e3ef;}
form#inquiry-form .form-captcha-wrap #div_captcha #captcha-wrap #imgCaptcha {width: 150px; height: 58px;}
form#inquiry-form .form-captcha-wrap #div_captcha #captcha-wrap #captcha-refresh {display: flex; width: 42px; align-items: center; justify-content: center; border-left: solid 1px #d8e3ef; background: url("/images/common/form/ic_captcha_refresh.svg") center/14px no-repeat #fff; cursor: pointer;}
form#inquiry-form .form-captcha-wrap #div_captcha .form-placeholder-text {display: none; }

/* 개인정보 수집 및 이용 동의 영역 */
form#inquiry-form .form-privacy-wrap {display: flex; align-items: center; justify-content: center; margin-top: 70px;}
form#inquiry-form .form-privacy-wrap input {width: 20px; height: 20px; border-radius: 3px; border: solid 1px #adaeb4; background: #fff;}
form#inquiry-form .form-privacy-wrap input:checked {border-color: #366cf1; background: url('/images/common/form/ic_check.svg') no-repeat #fff; background-size: cover;}
form#inquiry-form .form-privacy-wrap label {font-size: 15px; letter-spacing: -0.45px; color: #282828; margin-left: 6px;}
form#inquiry-form .form-privacy-wrap #privacy-modal {font-size: 15px; letter-spacing: -0.45px; color: #1c6efa; margin-left: 5px; cursor: pointer; text-decoration: underline;}

/* submit 버튼 영역 */
form#inquiry-form .form-submit-wrap {justify-content: center; margin-top: 20px; grid-template-columns: auto;}
form#inquiry-form .form-submit-wrap button {width: 160px; height: 44px; border-radius: 3px; background-color: #366cf0; text-align: center; font-weight: 500; font-size: 16px; letter-spacing: -0.48px; color: #fff; line-height: 44px;}

@media (max-width: 1250px) {
	form#inquiry-form > div {grid-template-columns: 1fr; grid-template-rows: 40px auto;}
	form#inquiry-form > div .title {max-height: unset; flex-direction: row; gap: 10px; align-self: center; justify-content: flex-start;}
	form#inquiry-form > div .title:has(> p span.red-dot) {gap: 20px;}
	form#inquiry-form .form-submit-wrap {grid-template-rows: auto;}
}

@media (max-width: 980px) {
	form#inquiry-form > div .title > p {font-size: 18px;}
	form#inquiry-form > div .title .sub input[type=checkbox] {width: 20px; height: 20px;}
	form#inquiry-form .form-privacy-wrap label {font-size: 16px; margin-left: 10px;}
	form#inquiry-form .form-privacy-wrap #privacy-modal {font-size: 14px;}
	form#inquiry-form .form-submit-wrap {margin-bottom: 30px;}
}

@media (max-width: 500px) {
	form#inquiry-form .form-privacy-wrap {flex-wrap: wrap; justify-content: flex-start;}
	form#inquiry-form .form-privacy-wrap #privacy-modal {margin-left: 34px; margin-right: auto;}
	form#inquiry-form .form-submit-wrap {margin-top: 40px;}
}
@media (max-width: 460px) {
	form#inquiry-form .form-captcha-wrap #div_captcha {grid-template-areas: "captcha" "textinput"; grid-template-columns: 194px; row-gap: 10px;}
	form#inquiry-form .form-captcha-wrap #div_captcha p {display: none;}
}
@media (max-width: 400px) {
	form#inquiry-form .form-privacy-wrap #privacy-modal {margin-top: 5px;}
}