/****************************************************************************************************
 * 공통
 ****************************************************************************************************/

label {font-weight: bold;color: #575757;}

#toast {
    position: fixed;
    bottom: 50%;
    left: 50%;
    padding: 15px 20px;
    transform: translate(-50%, 10px);
    border-radius: 30px;
    overflow: hidden;
    font-size: .8rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s, visibility .5s, transform .5s;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    z-index: 1100;
}

#toast.reveal {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0)
}

.essential_mark {
    font-weight: bold;
    color: red;
}

.text_space {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 40px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    font-size: 16px;
    resize: none;
    padding: 0 16px;
}

.content_vertical_bar {
    margin: 15px 75px 15px 75px;
    border-bottom: 1px solid #000000;
}

#mainframe {
    width: 95%;
    margin: 0 auto;
}

#formbase {
    box-sizing: border-box;
    width: 100%;
    max-width: 768px;
    margin: 50px auto;
    background-color: #F5F8FF;
    box-shadow: 2px 2px 2px 2px #e1e1e1;
}


/****************************************************************************************************
 * 타이틀 영역
 ****************************************************************************************************/

.voucher_top_logo {
    content: var(--voucher-top-logo);
    height: 20px;
}

#title_space {
    box-sizing: border-box;
    width: 100%;
    padding: 65px 75px 65px 75px;
    color: #ffffff;
    background-color: var(--color-green);
}

#title_text_header {
    font-weight: bold;
    font-size: 34px;
}

.title_vertical_bar {
    margin-top: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ffffff;
}

#title_text_content {
    font-size: 14px;
}


/****************************************************************************************************
 * 고객사 정보 영역
 ****************************************************************************************************/

#first_space {
    box-sizing: border-box;
    width: 100%;
    padding: 50px 75px 50px 75px;
}

#company_label {
    font-weight: bold;
}

#company_text {
    margin-top: 15px;
    margin-bottom: 30px;
}

#sectors_label {
    font-weight: bold;
}

#sectors_text {
    margin-top: 15px;
    margin-bottom: 30px;
}

#manager_label {
    font-weight: bold;
}

#manager_text {
    margin-top: 15px;
    margin-bottom: 30px;
}

#mail_label {
    font-weight: bold;
}

#mail_text {
    margin-top: 15px;
    margin-bottom: 30px;
}

#phone_label {
    font-weight: bold;
}

#phone_text {
    margin-top: 15px;
}


/****************************************************************************************************
 * 클로바인 정보 영역
 ****************************************************************************************************/

#second_space {
    box-sizing: border-box;
    width: 100%;
    padding: 25px 75px 50px 75px;
}

#many_label {
    font-weight: bold;
}

#data_label {
    font-weight: bold;
}

#type_label {
    font-weight: bold;
}

.radio_div {
    box-sizing: border-box;
}

.radio_div:first-child {
    padding-bottom: 30px;
}

.radio_div:not(:first-child):not(:last-child) {
    padding: 15px 0 30px 0;
}

.radio_div:last-child {
    padding-top: 15px;
}

.radio_div a:not(:last-child):first-child {
    margin-bottom: 15px;
}

.radio_div a:not(:first-child):not(:last-child) {
    margin: 15px 0;
}

.radio_div a:not(:first-child):last-child {
    margin-top: 15px;
}

.radio_label {
    display: block;
    font-size: 16px;
    color: #808080;
}

/****************************************************************************************************
 * 하단 영역
 ****************************************************************************************************/

#third_space {
    box-sizing: border-box;
    width: 100%;
    padding: 25px 75px 50px 75px;
}

/* 텍스트 박스 : 기타 문의 사항 */
#etc_label {
    font-weight: bold;
}

#etc_text {
    box-sizing: border-box;
    margin-top: 15px;
    height: 60px;
}

/****************************************************************************************************
 * 개인정보처리방침, 제3자 마케팅 활용동의서
 ****************************************************************************************************/

#fourth_space {
    box-sizing: border-box;
    width: 100%;
    padding: 25px 75px 65px 75px;
}

/* 개인정보처리방침 */
#privacy_label {
    margin-left: 10px;
    font-weight: bold;
}

#privacy_text {
    box-sizing: border-box;
    margin-top: 15px;
    margin-bottom: 30px;
    height: 85px;
}

/* 제3자 마케팅 활용동의서 */
#marketing_label {
    margin-left: 10px;
    font-weight: bold;
}

#marketing_text {
    box-sizing: border-box;
    margin-top: 15px;
    margin-bottom: 50px;
    height: 85px;
}

#privacy_text, #marketing_text {
    padding: 10px;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: #707070;
}

.check_box {
    position: relative;
    display: block;
    float: left;
    width: 26px;
    height: 26px;
}

.check_box_check {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.check_box_label {
    display: inline-block;
    width: 26px;
    height: 26px;
    cursor: pointer;
}

.check_box_label:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    -webkit-background-size: 26px 26px;
    background-size: 26px 26px;
}

.check_box_check + .check_box_label:before {
    /*background-image: url("/images/Icon/check_off.png");*/
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.366' height='20.366' viewBox='0 0 20.366 20.366'%3E%3Cdefs%3E%3Cstyle%3E .cls-1%7Bfill:none;stroke:%23b3b3b3;stroke-miterlimit:10%7D %3C/style%3E%3C/defs%3E%3Cg id='그룹_12' transform='translate(-74.807 -534.922)'%3E%3Ccircle id='타원_8' cx='9.683' cy='9.683' r='9.683' class='cls-1' transform='translate(75.307 535.422)'/%3E%3Cpath id='패스_39' d='M775.015 672.645l3.5 3.891 6.446-6.861' class='cls-1' transform='translate(-695 -128)'/%3E%3C/g%3E%3C/svg%3E");
}

.check_box_check:checked + .check_box_label:before {
    /*background-image: url("/images/Icon/check_on_2x.png");*/
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.366' height='20.366' viewBox='0 0 20.366 20.366'%3E%3Cg stroke-miterlimit='10' transform='translate(.5 .5)'%3E%3Ccircle cx='9.683' cy='9.683' r='9.683' fill='%238f7ae9' stroke='%238f7ae9'/%3E%3Cpath fill='none' stroke='%23fff' d='M775.015 537.648l3.5 3.891 6.446-6.861' transform='translate(-770.307 -528.425)'/%3E%3C/g%3E%3C/svg%3E");
}

/* 문의하기 버튼 */
#send_btn {
    box-sizing: border-box;
    width: 300px;
    height: 75px;
    line-height: 75px;
    margin: auto;
    border-radius: 10px;
    background-color: var(--color-green);
    text-align: center;
    cursor: pointer;
}

#btn_label {
    font-size: 25px;
}

.bottom_logo_wrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 20px;
}

.voucher_bottom_logo {
    content: var(--voucher-bottom-logo);
    height: 120px;
}

/****************************************************************************************************
 * 문의 결과 영역
 ****************************************************************************************************/

#formresult {
    display: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 768px;
    margin: 50px auto;
    background-color: #F5F8FF;
    box-shadow: 2px 2px 2px 2px #e1e1e1;
}

#result_title_space {
    box-sizing: border-box;
    width: 100%;
    padding: 50px 75px 65px 50px;
    color: #ffffff;
    background-color: #0ecfca;
}

.result_title_text {
    font-size: 34px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.44;
    letter-spacing: normal;
    text-align: left;
    word-break: keep-all;
    color: #ffffff;
}

#result_first_space {
    box-sizing: border-box;
    width: 100%;
    padding: 50px 75px 50px 75px;
}

.result_first_image {
    display: block;
    margin: 27px auto 44px auto;
}

.result_first_title {
    display: block;
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.46;
    letter-spacing: normal;
    text-align: center;
    word-break: keep-all;
    color: #333333;
}

.result_first_content {
    margin-top: 30px;
}

.result_first_content_text {
    display: block;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: normal;
    text-align: center;
    word-break: keep-all;
    color: #535353;
}

#result_second_space {
    box-sizing: border-box;
    width: 100%;
    padding: 15px 16.3% 50px 16.3%;
    font-size: 18px;
}

.result_second_title {
    display: block;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.44;
    letter-spacing: normal;
    text-align: left;
    word-break: keep-all;
    color: #333333;
}

#result_second_content {
    width: 100%;
    margin-top: 5px;
}

#result_second_content tbody tr {
    height: 40px;
}

#result_second_content tbody tr td {
    margin: 0;
    padding: 0;
    word-break: keep-all;
}

#result_second_content tbody tr td:nth-child(1) {
    width: 35px;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: normal;
    text-align: left;
    color: #333333;
}

#result_second_content tbody tr td:nth-child(2) {
    width: calc(100% - 35px);
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: normal;
    text-align: left;
    color: #535353;
}

@media all and (max-width: 768px) {
    #title_text_header {
        font-size: 28px;
    }

    #title_text_content {
        font-size: 12px;
    }

    .content_vertical_bar {
        margin: 15px 16px 15px 16px;
    }

    #title_space {
        padding: 65px 16px 65px 16px;
    }

    #first_space {
        padding: 50px 16px 50px 16px;
    }

    #second_space {
        padding: 25px 16px 50px 16px;
    }

    #third_space {
        padding: 25px 16px 50px 16px;
    }

    #fourth_space {
        padding: 25px 16px 65px 16px;
    }

    .voucher_bottom_logo {
        height: 50px;
    }

    #toast {
        font-size: .7rem;
    }

    #result_first_space {
        padding: 50px 10px 50px 10px;
    }

    #result_second_space {
        padding: 15px 15px 50px 15px;
    }
}



/* 문의 - 일반문의, 도입문의 스타일 개선 22.11.30 */
/* 공통 */
.cont_contact{max-width:660px;margin:0 auto;}
.cont_contact .bt_btn_bx{margin-top:50px;display: block;width: 100%;}

.q_inputbox_pc {width: 100%;height: 316px;border-radius: 8px;border: solid 1px #a8a8a8;background-color: #fff;position: relative;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;}
.q_inputbox_pc:focus-within ,.q_input_box_pc:focus-within{border: solid 1px  #08a6fc;}

.q_select_pc{padding:10px 10px 0;margin: 0 10px;width: calc(100% - 20px);height:56px;border:none;border-radius: 0;-webkit-appearance: none;-moz-appearance: none;appearance: none;background: url("/images/icon/pc_down_arrow.png") no-repeat 98% 50%;}

.q_non_select{color:#bfbfbf;}

.q_grayline_pc{width:100%;height:1px;border-top:solid 1px #ccc;}

.q_inputtext_pc{resize: none;width: 100%;height: calc(100% - 56px);padding:20px 10px 20px 20px;overflow: auto;background: transparent;}
.q_inputtext_pc::-webkit-scrollbar {width: 10px;}
.q_inputtext_pc::-webkit-scrollbar-thumb{background-color: #a8a8a8;border-radius: 10px;background-clip: padding-box;border: 2px solid transparent;}
.q_inputtext_pc::-webkit-scrollbar-track{background-color: #fff;border-radius: 10px;box-shadow: inset 0px 0px 5px white;}
.q_inputtext_pc:focus ~ .q_subtitle_pc, .q_select_pc:focus ~ .q_subtitle_pc{color: #08a6fc;}
.q_textarea_box_pc:focus-within, .q_textarea_box_mo:focus-within{border: solid 1px  #08a6fc;}

.q_member_box_pc{margin-top:26px;width: 100%;display:flex;flex-direction: row;justify-content: space-between;align-items: center;}
.q_member_item_pc{cursor:pointer;width: 49%;height: 56px;border-radius: 8px;display:flex;flex-direction: row;justify-content: center;align-items: center;}

.q_select_member {border: solid 1px #08a6fc;background-color: #e5f3ff;}
.q_select_member > span {font-weight: bold;font-stretch: normal;font-style: normal;line-height: 2.38;letter-spacing: -0.8px;text-align: center;color: #08a6fc;}

.q_non_member{border: solid 1px #a8a8a8;background-color: #fff;}
.q_non_member > span{font-weight: normal;font-stretch: normal;font-style: normal;line-height: 2.38;letter-spacing: -0.8px;text-align: center;color: #575757;}

.q_input_box_pc{margin-top:25px;position:relative;width: 100%;height: 56px;border-radius: 8px;border: solid 1px #a8a8a8;background-color: #fff;display:flex;flex-direction: column;justify-content: flex-start;align-items: center;}

.q_input_pc{background: transparent;width:100%;height:100%;padding:7px 20px 0;}
.q_input_pc:focus ~ .q_subtitle_pc{color: #08a6fc;}

.q_subtitle_pc{background:#fff;width: auto;padding:0 12px;height: 24px;font-weight: normal;font-stretch: normal;font-style: normal;letter-spacing: -0.8px;text-align: center;color: #575757;position: absolute;line-height: 1;height: auto;top: 0;left:8px;transform: translateY(-50%);}

.q_sub_redstar{color: red!important;line-height: 1;margin-left: 5px;display: inline-block;vertical-align: text-top;}

.check_box_space{margin-top:10px;width: 100%; display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start}
.check_box_space .q_checkbox_pc{margin-top:15px;}

.check_text_pc {height:30px;margin-left:8px;font-weight: normal;font-stretch: normal;font-style: normal;letter-spacing: -0.8px;text-align: left;color: #222;position:relative;line-height: 1;height: auto;}
.check_text_pc .underline{display: inline;text-decoration: underline!important;font-weight:bold;}

.q_checkbox_pc > input[type="checkbox"]+label {display: block;width: 24px;height: 24px;background:  url("/images/icon/header_non_check.png")  no-repeat 0 0px / contain;}
.q_checkbox_pc > input[type='checkbox']:checked+label { background:  url("/images/icon/header_check.png")  no-repeat 0 1px / contain;}
.q_checkbox_pc > input[type="checkbox"] {display: none;}

.q_checkbox_pc{display:flex;flex-direction: row;justify-content: flex-start;align-items: center;}

.non_ok_pc{background-color: #bfbfbf;}
.non_ok_pc:hover{background-color: #bfbfbf!important;cursor: initial!important;}

.q_textarea_box_pc{width: 100%;margin-top:25px;height: 192px;border-radius: 8px;border: solid 1px #a8a8a8;background-color: #fff;position: relative;display:flex;flex-direction: column;justify-content: flex-start;align-items: center;}

.q_contenttext_pc:focus ~ .q_subtitle_pc, .q_select_pc:focus ~ .q_subtitle_pc{color: #08a6fc;}
.q_inputbox_pc:focus-within ,.q_input_box_pc:focus-within{border: solid 1px  #08a6fc;}

.q_email_box_pc:focus-within{
    border: solid 1px  #08a6fc;
}
.q_input_mo:focus ~ .q_subtitle_pc{
    color: #08a6fc;
}
.q_input_mo:focus ~ .q_subtitle_pc{color: #08a6fc;}
.q_email_input_pc:focus ~ .q_subtitle_pc{
    color: #08a6fc;
}


.q_contenttext_mo:focus ~ .q_subtitle_pc, .q_select_pc:focus ~ .q_subtitle_pc{
    color: #08a6fc;
}
.cont_contact .bt_btn_bx{display: flex;align-items: center;justify-content: space-between;}
.cont_contact .bt_btn_bx a{width:49.5%;}

.cont_contact ::-webkit-input-placeholder,
.cont_contact ::placeholder{color:#bbb;font-weight:400}

.q_contenttext_pc:focus ~ .q_subtitle_pc, .q_select_pc:focus ~ .q_subtitle_pc{
    color: #08a6fc;
}
.q_contenttext_pc:focus ~ .q_subtitle_pc, .q_select_pc:focus ~ .q_subtitle_pc{
    color: #08a6fc;
} 

@media all and (max-width:639px){
    .q_member_item_pc{height:50px;}
    .q_inputbox_pc{height:230px}
    .check_box_space .q_checkbox_pc {margin-top: 8px;}
    .cont_contact .bt_btn_bx {margin-top: 30px;}
    .cont_contact *:not(a){font-size:15px;}
}

@media (max-width: 479px){
    .btn_cm + .btn_cm {
        margin-left: 0;
        margin-top: 0;
    }
}