@charset 'UTF-8';

.survey_wrap { padding: 20rem 0 20rem; background-color: #F4F6FA; color: #173348; }
.survey_wrap > .tit { margin-bottom: 10rem; text-align: center; font-size: 3.6rem; font-weight: 700; padding: 0 15px;}
.survey_wrap .cont { width: 100%; max-width: 124rem; margin: 0 auto; padding: 0 2rem; }
.survey_wrap .cont .form_wrap { padding: 6rem; border-radius: 5px; background-color: #fff; margin-top: 1rem; }
.survey_wrap .cont .form_wrap .image { width: 100%; margin: 0}
.survey_wrap .cont .form_wrap .image img { width: 100%; object-fit: contain; }
/*.survey_wrap .cont .form_wrap + .form_wrap { margin-top: 1rem; }*/
.survey_wrap .cont .form_wrap .tit_wrap { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 2rem; }
.survey_wrap .cont .form_wrap.input_form .tit_wrap { margin-bottom: 4rem; }
.survey_wrap .cont .form_wrap .tit_wrap.between { justify-content: space-between; }
.survey_wrap .cont .form_wrap .tit { font-size: 1.8rem; font-weight: 600; }
.survey_wrap .cont .form_wrap .desc { margin-left: 2rem; font-size: 1.4rem; font-weight: 600; color: #9E9E9E; }
.survey_wrap .cont .form_wrap input[type="text"] { position: relative; width: 100%; height: 6rem; line-height: 6rem; padding: 0 1.5rem; border: 1px solid #EAEAEA; border-radius: 5px; font-size: 1.8rem; }
.survey_wrap .cont .form_wrap.name input[type="text"] { max-width: 300px; }

.survey_wrap .cont .form_wrap textarea { width: 100%; padding: 1rem 1.5rem; border: 1px solid #EAEAEA; border-radius: 5px; font-size: 1.8rem; }
.survey_wrap .cont .form_wrap .textarea_box .count {display: inline-block; margin-top: 10px; font-size: 1.6rem}

.radio_box + .radio_box,
.survey_wrap .cont .form_wrap .inp_box + .inp_box { margin-top: 1rem; }

.survey_wrap .cont .form_wrap .radio_wrap {  }
.survey_wrap .cont .form_wrap input[type="radio"] {  }
.input_box input[type="checkbox"] + label,
.survey_wrap .cont .form_wrap input[type="radio"] + label { position: relative; padding-left: 2.75rem; cursor: pointer; }
.input_box input[type="checkbox"] + label strong,
.survey_wrap .cont .form_wrap input[type="radio"] + label strong { font-weight: 500; }
.input_box input[type="checkbox"]  + label::before,
.survey_wrap .cont .form_wrap input[type="radio"] + label::before { content:''; position: absolute; top:50%; left: 0; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid #BDBDBD; border-radius:50%; cursor: pointer}
.survey_wrap .cont .form_wrap input[type="radio"]:checked + label:before { border-color: #173348; }
.survey_wrap .cont .form_wrap input[type="radio"]:checked + label:after { content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 100%; background-color: #173348;}

.input_box + .input_box {margin-top: 1rem}
.input_box input[type="checkbox"]  + label::before {border-radius: 2px}
.input_box input[type="checkbox"]:checked + label::before {content: "\f14a"; border: none; font-weight: 900 ;font-family: "Font Awesome 6 Pro"; font-size: 22px; width: auto; height: auto}

.inp_box {display: flex; align-items: flex-start}
.inp_box input[type="checkbox"]:before {}
.inp_box input[type="checkbox"] + label { display: flex; align-items: center; justify-content: flex-start; }
.inp_box input[type="checkbox"] + label svg { width: 1.8rem; height: 1.8rem; margin-right: 7px; fill: #173348; }
.inp_box input[type="checkbox"] + label .y { display: none; }
.inp_box input[type="checkbox"] + label .n { display: block; }
.inp_box input[type="checkbox"]:checked + label .y { display: block; }
.inp_box input[type="checkbox"]:checked + label .n { display: none; }

.priv .inp_box input[type="checkbox"] + label { font-size: 1.6rem; content: "\f14a"; cursor: pointer}
.priv .inp_box input[type="checkbox"] + label svg { fill: #DDDDDD; }
.priv .inp_box input[type="checkbox"]:checked + label svg { fill: #177FBB; }

.survey_wrap .cont .form_wrap .nice-select { max-width: 300px; height: 60px; line-height: 60px; font-size: 18px; color: #BDBDBD; }
.survey_wrap .cont .form_wrap .nice-select .list { width: auto; color: #173348; font-size: 16px; }

.survey_wrap .cont .up_btn { display: block; width: 100%; max-width: 16rem; height: 4.5rem; line-height: 4.5rem; font-size: 1.6rem; font-weight: 500; border: 1.5px solid #173348; border-radius: 2em; text-align: center; }
.survey_wrap .cont .up_btn.fill { background-color: #173348; color: #fff; }

.input_area.email .input_flex { display: flex; align-items: center; justify-content: flex-start; }
.input_area.email .input_flex .mail_box { flex: 1; }
.input_area.email .input_flex .nice-select { flex-shrink: 0; min-width: 300px; max-width: 40%; margin-left: 1em; }

.survey_wrap .cont .form_wrap .set .input_flex + .input_flex {margin-top: 10px}

.survey_wrap .cont .upload_wrap { display: flex; align-items: flex-start; justify-content: space-between; }
.survey_wrap .cont .upload_wrap .btn_wrap { width: 15%; }
.survey_wrap .cont .upload_wrap .file_wrap { width: 80%; }

.survey_wrap .cont .form_wrap .file_wrap { display: flex; align-items: center; justify-content: flex-start; margin-top: 1rem; margin-left: -20px; flex-wrap: wrap; }
.survey_wrap .cont .form_wrap .file_wrap .file { display: flex; align-items: center; justify-content: flex-start; margin-left: 20px; margin-top: 5px; font-size: 1.5rem; }

.survey_wrap .cont .form_wrap .file { display: flex; align-items: center }
.survey_wrap .cont .form_wrap .file .up_btn > label { cursor: pointer; }
.survey_wrap .cont .form_wrap .file .file_name_wrap { display: flex; align-items: center; justify-content: flex-start; margin-left: 2rem; font-size: 1.5rem; }
.survey_wrap .cont .form_wrap .file .file_name_wrap .ico { display: flex; align-items: center; justify-content: center; margin-right: 0.5rem; }
.survey_wrap .cont .form_wrap .file .fileInput { display: none; }

.survey_wrap .cont .form_wrap .file_wrap .file .ico { width: 1em; height: 1em; margin-right: 5px; }
.survey_wrap .cont .form_wrap .file_wrap .file .ico svg { width: 100%; height: 100%; }
.survey_wrap .cont .form_wrap .file_wrap .file .name { display: inline-block; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.survey_wrap .cont .form_wrap .priv_wrap { max-height: 270px; padding: 2rem; border: 1px solid #EAEAEA; border-radius: 5px; color: #757575; font-size: 1.4rem; overflow: auto; }
.survey_wrap .cont .form_wrap .priv_wrap::-webkit-scrollbar { width: 3px; }
.survey_wrap .cont .form_wrap .priv_wrap::-webkit-scrollbar-thumb { height: 20%; background: #A9A9A9; border-radius: 10px; }
.survey_wrap .cont .form_wrap .priv_wrap p + p { margin-top: 2em; }

.survey_wrap .cont .form_wrap .mail_box {display: flex; align-items: center; gap: 10px; }
.survey_wrap .cont .form_wrap .mail_box > div {width: 100%;}

.survey_wrap .cont > .btn_wrap { display: flex; align-items: center; justify-content: center; margin-top: 6rem; }

.survey_wrap .input_area .search_box {position: relative}
.survey_wrap .input_area .search_box button {position: absolute; right:1.5rem; top: 50%; transform: translateY(-50%); font-size: 2rem}
.survey_wrap .input_area .search_box input[type="text"] {padding-right: 5.5rem}
.survey_wrap .input_area .search_box input[type="text"] {padding-right: 5.5rem}


.required {position: relative}
.required:before {content: '*'; display: inline-block; margin-right: 3px; color: #177FBB}

/*re_survey*/
.form_wrap .num_box + .num_box { margin-top: 3rem; }
.form_wrap .num_tit { position: relative; display: inline-block; margin-bottom: 2rem; font-size: 1.8rem; font-weight: 600; }
.form_wrap .num_tit + .tit_tip { margin-top: -1.5rem; }
.form_wrap .tit_tip { margin-bottom: 2.5rem; font-size: max(11px,1.4rem); color: #999}

.que_info_box { padding: 3rem 2.5rem; font-size: 16px; font-weight: 400; }
.que_info_box .tit { font-weight: 600; }
.que_info_box .text { margin-top: 5px; }

@media screen and (max-width: 768px){
    .survey_wrap {padding: 12rem 0}
    .survey_wrap .cont .form_wrap {padding: 3rem}
    .survey_wrap > .tit {margin-bottom: 5rem}

    .survey_wrap .cont .form_wrap input[type="radio"]:checked + label:after,
    .input_box input[type="checkbox"] + label::before, .survey_wrap .cont .form_wrap input[type="radio"] + label::before {width: 12px; height: 12px;}

    .survey_wrap .cont .form_wrap input[type="radio"]:checked + label:before {width: 6px; height: 6px; border: 5px solid #fff}

}