@charset "UTF-8";




#input_form_component_wrap {
    width: 1000px; margin: 120px auto; border: 1px solid #29C4BE; border-radius: 4px; padding: 20px; box-sizing: border-box;
}






.input_group .input_label {
    display: flex;
    margin-bottom: 7px;
    color: #000; font-size: 16px; font-weight: 400; letter-spacing: -0.63px;
}

.input_group .input_value_box .input_value {
    display: flex; align-items: center; width: 100%; height: 50px;
    padding: 0 15px;
    border: 1px solid #29C4BE; border-radius: 6px; box-sizing: border-box;
    color: #101010; font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: -0.45px; background-color: #FFF;
}


/* input_group row css */
.input_group.row {
    display: flex; justify-content: space-between; align-items: center;
}

.input_group.row .input_label {
    margin-bottom: 0;
}
/* input_group row css END */


/* input_group row_reverse */
.input_group.row_reverse {
    display: flex; justify-content: flex-end; flex-direction: row-reverse; align-items: center;
}

.input_group.row_reverse .input_label {
    margin-bottom: 0; margin-left: 6px;
}
/* input_group row_reverse END */


/* input[type=text] write css */
.input_group .input_value_box.write .input_value, .input_group .input_value_box .input_value:not([readonly]) {
    padding: 0 43px 0 15px; background: url('/img/edit-icon@2x.png') calc(100% - 15px) 50% no-repeat; background-size: 14px 14px; background-color: #FFF;
}
/* input[type=text] write css END */


/* input[type=text] disabled css */
.input_group .input_value_box .input_value:disabled {
    background-color: #F2F4F6;
}
/* input[type=text] disabled css END */


/* input[type=text] grey css */
.input_group .input_value_box.grey .input_value {
    border-color: #D7DAE2;
}
/* input[type=text] grey css END */


/* select 일반 */
.input_group .select_value_box .select_value {
    display: flex; align-items: center; width: 100%; height: 50px;
    padding: 0 43px 0 15px;
    border: 1px solid #29C4BE; border-radius: 6px; box-sizing: border-box;
    color: #101010; font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: -0.45px;
    background: url('/img/option_arrow_m@2x.png') calc(100% - 15px) 50% no-repeat; background-size: 12px 8px; background-color: #FFF;
}

.input_group .select_value_box .select_value {
    -o-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* select 일반 END */


/* select grey */
.input_group .select_value_box.grey .select_value {
    border-color: #D7DAE2;
}
/* select grey END */


/* select disabled */
.input_group .select_value_box .select_value:disabled {
    background-color: #F2F4F6;
}
/* select disabled END */




/* checkbox 일반 */
.input_group .checkbox_value_box {
    position: relative; width: 24px; height: 24px; min-width: 24px;
}

.input_group .checkbox_value_box .checkbox_value {
    display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0;
}

.input_group .checkbox_value_box .checkbox_bg {
    display: block; width: 100%; height: 100%;
    border: 1px solid #29C4BE; border-radius: 4px; box-sizing: border-box;
}

.input_group .checkbox_value_box .checkbox_value:checked ~ .checkbox_bg {
    background: url('/img/path_5.png') 50% no-repeat; background-size: 80%; background-color: #FFF;
}
/* checkbox 일반 END */