@import url(../../../css/nanumgothic.css);
.form-write-table { width: 100%; font-family: 'Nanum Gothic'; font-size: 15px; }

.form-write-btn { width: 100%; text-align: center; }
.form-write-btn > button { padding: 7px 20px; height: 40px; border-radius: 5px; background-color: #666; color: #fff; font-size: 0.85em; font-weight: 700; }

.form-fields-wrap { width: 100%; margin-bottom: 30px; }

.form-fields { margin-top: 15px; }
.form-fields:first-child { margin-top: 0; }
.form-fields .field-descript { margin-bottom: 7px; font-size: 0.85em; color: #999; }
.form-fields .field-label { margin-bottom: 7px; font-size: 0.85em; font-weight: 700; }
.form-fields .field-label .chk_nc:after { content: '*'; display: inline; color: red; margin-left: 3px; }
.form-fields button { padding: 7px 20px; height: 40px; border-radius: 5px; background-color: #666; color: #fff; font-size: 0.85em; font-weight: 700; }

.form-agree-wrap { margin: 15px 0; padding: 15px; background-color: #fafafa; text-align: center; }
.form-agree-wrap span { font-size: 0.85em; display: inline; padding: 5px 8px; background-color: #ddd; margin-left: 5px; border-radius: 5px; cursor: pointer; }

.form-agree-view-wrap { margin: 15px 0; padding: 15px; background-color: #fafafa; box-sizing: border-box; }
.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; }
.form-agree-view-wrap .form-agree { margin-top: 10px; font-size: 0.85em; }

.terms-wrap { 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; }
.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; }
.terms-popup .terms-top { position: relative; width: 100%; height: 60px; box-sizing: border-box; border-bottom: solid 1px #ddd; padding-left: 20px; }
.terms-popup .terms-top h3 { font-weight: 600; line-height: 60px; }
.terms-popup .terms-btm { width: 100%; height: 60px; box-sizing: border-box; border-top: solid 1px #ddd; text-align: center; padding: 12px; }
.terms-popup .terms-btm button { width: 200px; height: 36px; background-color: #2e86c1; color: #fff; border-radius: 5px; }
.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%; }
.terms-popup .terms a { color: #2e86c1; text-decoration: underline; }
.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; }
.terms-close:before { display: block; content: ""; position: absolute; top: 50%; left: -8px; width: 20px; height: 4px; margin-top: -2px; background: #aaa; }

/***** form input *****/
.form-fields input[type=text],
.form-fields input[type=tel],
.form-fields textarea { border: solid 1px #ddd; border-radius: 3px; }
.form-fields input[type=text],
.form-fields input[type=tel] { height: 40px; padding: 0 10px; }
.form-fields select { height: 40px; border: solid 1px #ddd; min-width: 50px; padding-left: 5px; margin-left: 10px; }
.form-fields select:first-of-type { margin-left: 0; }
/* input_text */
.form-fields .input_text.small { width: 25%; }
.form-fields .input_text.middle { width: 50%; }
.form-fields .input_text.big { width: 100%; }
/* textarea */
.form-fields textarea { width: 100%; padding: 10px; box-sizing: border-box; }
.form-fields .textarea.small { height: 70px; }
.form-fields .textarea.middle { height: 150px; }
.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 */
.form-fields .phone { width: 70px; }
.form-fields .phone.inputbox { width: 150px; }
/* datetime */
.form-fields .datetime.inputbox { width: 120px; text-align: center; }
/* address */
.form-fields.address-wrap .postcode { width: 80px; text-align: center; }
.form-fields.address-wrap .address,
.form-fields.address-wrap .details { width: 100%; margin-top: 7px; }
/* number */
.form-fields .number { width: 120px; text-align: right; }
/* image */
.form-fields.image-wrap p { margin-top: 4px; font-size: 0.85em; font-weight: 700; }
.form-fields.image-wrap .file_txt_input { width: 200px; }
/* file */
.form-fields.file-wrap p { margin-top: 4px; font-size: 0.85em; font-weight: 700; }
.form-fields.file-wrap .file_txt_input { width: 200px; }
/* email */
.form-fields.email-wrap .field-input div { float: left; }
.form-fields.email-wrap .field-input .form_field_email_id { width: 40%; }
.form-fields.email-wrap .field-input .form_field_email_at { width: 10%; line-height: 45px; text-align: center;  }
.form-fields.email-wrap .field-input .form_field_email_host { width: 50%; position: relative; }
.form-fields.email-wrap .field-input .form_field_email_id .email,
.form-fields.email-wrap .field-input .form_field_email_host select.email { width: 100%; }
.form-fields.email-wrap .field-input .form_field_email_host input { position: absolute; left: 0; top: 0; width: calc(100% - 20px); }