.sub0302 .form-write-table { position: relative; width: 90%; max-width: 1200px; height: auto; font-family: 'Noto Sans KR', 'Noto Sans SC'; font-size: inherit; margin: 0 auto; background: url(../../../img/sub0302_bg.jpg) no-repeat left center; background-size: cover; }
.sub0302 .form-write-table .form_tit { opacity: 0.5; display: block; font-family: 'TmoneyRoundWindExtraBold'; text-transform: uppercase; font-size: 1.73em; color: #fff; position: absolute; z-index: 1; left: 0.7em; top: 0.5em; line-height: 1.2; }
.sub0302 .form-write-table form { position: relative; padding: 6em 2.7em 3.5em 10.5em; }
.sub0302 .form-write-btn { position: absolute; width: auto; right: 2.7em; top: 22.3em; }
.sub0302 .form-write-btn > button { height: auto; font-size: 0.6em; color: #fff; padding: 0.8em 3em; border-radius: 0.2em; background-color: #e67683; }

.sub0302 .form-fields-wrap { width: 100%; margin-bottom: 0; }

.sub0302 .form-fields { float: left; width: 100%; margin-top: 20px; }
.sub0302 .form-fields:nth-last-child(n+3) { width: 50%; }
.sub0302 .form-fields:after { content: ''; display: block; clear: both; }
.sub0302 .form-fields:first-child { margin-top: 0; }
.sub0302 .form-fields .field-descript { font-size: 0.6em; color: #999; }
.sub0302 .form-fields .field-label { float: left; width: 5.8em; font-size: 0.6em; font-weight: normal; line-height: 2.8em; color: #e67683; padding:0 1em 0 2em; margin-bottom: 0; }
.sub0302 .form-fields .field-input { position: relative; float: left; width: calc(100% - 3.48em); }
.sub0302 .form-fields .field-label .chk_nc:after { content: '*'; display: inline; color: red; margin-left: 3px; display: none; }
.sub0302 .form-fields button { padding: 7px 20px; height: 40px; border-radius: 5px; background-color: #666; color: #fff; font-size: 0.85em; font-weight: 700; }

.sub0302 .form-agree-wrap { font-size: 0.4em; text-align: left; margin: 1.6em 0 0; padding: 0; padding-left: 8.6em; background-color: transparent; }
.sub0302 .form-agree-wrap .form-agree { position: relative; }
.sub0302 .form-agree-wrap .form-agree .txt { margin-left: 1.6em; }
.sub0302 .form-agree-wrap span { display: inline-block; font-size: inherit; font-weight: 200; color: #fff; padding: 0.4em 0.5em; background-color: #e67683; margin-left: 5px; border-radius: 0.2em; margin-top: 0; cursor: pointer; }

.sub0302 .form-agree-view-wrap { margin: 15px 0; padding: 15px; background-color: #fafafa; box-sizing: border-box; }
.sub0302 .form-agree-view-wrap .form-agree-view { padding: 15px; width: 100%; height: 200px; font-size: 0.85em; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; background-color: #fff; border: solid 1px #ddd; word-break: break-all; }
.sub0302 .form-agree-view-wrap .form-agree { margin-top: 10px; font-size: 0.85em; }

.sub0302 .terms-wrap { font-size: 0.5em; position: fixed; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); top: 0; bottom: 0; left: 0; right: 0; display: none; color: #333; }
.sub0302 .terms-popup { position: absolute; width: 90%; max-width: 1000px; height: 70%; top: 50%; left: 50%; background-color: #fff; box-sizing: border-box; border-radius: 10px;
transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px; }
.sub0302 .terms-popup .terms-top { position: relative; width: 100%; height: 60px; box-sizing: border-box; border-bottom: solid 1px #ddd; padding-left: 20px; }
.sub0302 .terms-popup .terms-top h3 { font-weight: 600; line-height: 60px; }
.sub0302 .terms-popup .terms-top .terms-close-wrap { position: absolute; width: 4em; height: 100%; right: 0; top: 0; }
.sub0302 .terms-popup .terms-btm { width: 100%; height: 60px; box-sizing: border-box; border-top: solid 1px #ddd; text-align: center; padding: 12px; }
.sub0302 .terms-popup .terms-btm button { width: 200px; height: 36px; background-color: #c89663; color: #fff; border-radius: 5px; }
.sub0302 .terms-popup .terms { width: 100%; height: calc(100% - 120px); box-sizing: border-box; padding: 30px; word-break: break-all; overflow-y: auto; line-height: 150%; }
.sub0302 .terms-popup .terms a { color: #2e86c1; text-decoration: underline; }
.sub0302 .terms-close { display: inline-block; position: absolute; margin: 0 7px 0 7px; padding: 0; width: 4px; height: 20px; background: #aaa; transform: rotate(45deg); top: 20px; right: 20px; cursor: pointer; }
.sub0302 .terms-close:before { display: block; content: ""; position: absolute; top: 50%; left: -8px; width: 20px; height: 4px; margin-top: -2px; background: #aaa; }

/***** form input *****/
.sub0302 .form-fields input[type=text],
.sub0302 .form-fields input[type=tel],
.sub0302 .form-fields input[type=email],
.sub0302 .form-fields select,
.sub0302 .form-fields textarea { border: none; font-size: 0.5em; color: #444; background-color: #f2f0eb; border-radius: none; }
.sub0302 .form-fields input[type=text],
.sub0302 .form-fields input[type=tel],
.sub0302 .form-fields input[type=email],
.sub0302 .form-fields select { position: relative; width: 100%; height: 3.33em; padding: 0 1.33em; -webkit-appearance: none; appearance: none; }
.sub0302 .form-fields.select-wrap .field-input:before { content: '▼'; font-size: 0.4em; display: block; color: #e67683; position: absolute; top: 50%; transform: translateY(-50%); right: 1.33em; z-index: 1; }

/* input_text */
.sub0302 .form-fields .input_text.small { width: 25%; }
.sub0302 .form-fields .input_text.middle { width: 50%; }
.sub0302 .form-fields .input_text.big { width: 100%; }
/* textarea */
.sub0302 .form-fields textarea { width: 100%; padding: 1.33em; box-sizing: border-box; }
.sub0302 .form-fields .textarea.small { height: 70px; }
.sub0302 .form-fields .textarea.middle { height: 16em; }
.sub0302 .form-fields .textarea.big { height: 300px; }
/* radio */
.form-fields.radio-wrap { width: 100%; }
.form-fields.radio-wrap:after { content: ''; display: block; clear: both; float: none; }
.form-fields.radio-wrap p { float: left; margin-right: 15px; }
.form-fields.radio-wrap p input[type=radio] { margin-right: 5px; }
/* checkbox */
.form-fields.checkbox-wrap { width: 100%; }
.form-fields.checkbox-wrap:after { content: ''; display: block; clear: both; float: none; }
.form-fields.checkbox-wrap .field-input p { float: left; margin-right: 15px; }
.form-fields.checkbox-wrap .field-input p input[type=checkbox] { margin-right: 5px; }
/* phone */
.sub0302 .form-fields .phone { width: 100%; }
.sub0302 .form-fields .phone.inputbox { width: 100%; }
/* datetime */
.sub0302 .form-fields .datetime.inputbox { width: 100%; text-align: center; }
/* address */
.sub0302 .form-fields.address-wrap .postcode { width: 80px; text-align: center; }
.sub0302 .form-fields.address-wrap .address,
.sub0302 .form-fields.address-wrap .details { width: 100%; margin-top: 7px; }
/* number */
.sub0302 .form-fields .number { width: 120px; text-align: right; }
/* image */
.sub0302 .form-fields.image-wrap p { margin-top: 4px; font-size: 0.85em; font-weight: 700; }
.sub0302 .form-fields.image-wrap .file_txt_input { width: 200px; }
/* file */
.sub0302 .form-fields.file-wrap p { margin-top: 4px; font-size: 0.85em; font-weight: 700; }
.sub0302 .form-fields.file-wrap .file_txt_input { width: 200px; }
/* email */
.sub0302 .form-fields.email-wrap .field-input div { float: left; }
.sub0302 .form-fields.email-wrap .field-input .form_field_email_id { width: 40%; }
.sub0302 .form-fields.email-wrap .field-input .form_field_email_at { width: 10%; line-height: 45px; text-align: center;  }
.sub0302 .form-fields.email-wrap .field-input .form_field_email_host { width: 50%; position: relative; }
.sub0302 .form-fields.email-wrap .field-input .form_field_email_id .email,
.sub0302 .form-fields.email-wrap .field-input .form_field_email_host select.email { width: 100%; }
.sub0302 .form-fields.email-wrap .field-input .form_field_email_host input { position: absolute; left: 0; top: 0; width: calc(100% - 20px); }

@media(max-width:1099px){
    .sub0302 .sub_cont_wrap { padding: 0; }
    .sub0302 .form-write-table { width: 100%; }
    .sub0302 .form-write-table .form_tit { font-size: 1.3em; left: 0.55em; }
    .sub0302 .form-write-table form { width: 90%; margin: 0 auto; padding: 4em 0 3em 0; }
    .sub0302 .form-fields { float: none; margin-top: 10px; }
    .sub0302 .form-fields:nth-last-child(n+3) { width: 100%; }
    .sub0302 .form-fields .field-label { padding-left: 0; }
    .sub0302 .form-write-btn { right: 0; top: 22.9em; }
}
@media(max-width:690px){
    .sub0302 .form-write-table form { padding-bottom: 2em; }
    .sub0302 .form-write-btn { position: initial; margin-top: 0.7em; text-align: right; }
    .sub0302 .form-write-btn > button { width: 50%; }
}

.form-agree input, .form-agree input[type="checkbox"] + label.chk {
    position: absolute;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: 0;
    width: 1.1em;
    height: 1.1em;
    border: none;
    border-radius: 0.3em;
    background-color: #fff;
    z-index: 10; }
.form-agree input { width: 0; }
.form-agree label.chk i { position: absolute; display: none; font-size: 1em; font-weight: bold; color: #c89663; vertical-align: -0.1em; }
.form-agree input[type="checkbox"]:checked + label.chk i { display: inline; }