/*****************************************
 * contact.css
 * 견적문의 페이지
 *****************************************/


/*-----------------------------------------
 * 오류알림 영역
 -----------------------------------------*/
/** 컨테이너 */
#contact-error-wrap {
}


/*-----------------------------------------
 * 문의 폼
 -----------------------------------------*/
/** 컨테이너 */
#contact-form {
}


/** 문의 섹션 */
#contact-form fieldset {
    padding: 3rem 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

#contact-form fieldset:first-of-type {
    border-top: 2px solid black;
}

#contact-form fieldset:last-of-type {
    border-bottom: 2px solid black;
}

#contact-form .legend {
    margin-bottom: .5rem;
    color: rgb(130, 130, 130);
    font-size: 1.5rem;
    word-break: keep-all;
}


/** 문의 공통
 - 텍스트 스타일
 - 필수입력 표시
 */
#contact-form .text-green {
    color: rgb(96, 208, 96);
}

#contact-form .require {
    position: relative;
}

#contact-form .require::before {
    position: absolute;
    top: -5px;
    left: -10px;
    width: 5px;
    height: 5px;
    content: "";
    background-color: rgb(96, 208, 96);
    border-radius: 50%;
}

@media (max-width: 991.98px) {
    #contact-form .text-green.require {
        display: inline-block;
        margin-bottom: .5rem;
        font-size: 1.25rem;
    }
}


/** 문의 폼 input
 - bootstrap4 스타일 재설정
 */
#contact-form .form-control,
#contact-form .custom-file-label {
    background-color: rgb(238, 238, 238);
    border: none;
    color: #6C757D;
}

#contact-form .input-group-text {
    background-color: rgb(238, 238, 238);
    border: none;
    font-weight: bold;
}

#contact-form .custom-file .custom-file-label:after {
    width: 0;
    padding: 0;
    content: "";
}

#contact-form .custom-control-input ~ .custom-control-label {
    cursor: pointer;
}

#contact-form .custom-control-input ~ .custom-control-label::before {
    border-width: 2px;
}

#contact-form .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

#contact-form .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #60D05C;
    border-color: #60D05C;
}

#contact-form [type=radio].custom-control-input:checked ~ .custom-control-label::after {
    background-image: none;
}


/** 문의폼 탭 스타일 체크박스
 - 모바일 화면 전환시 아래 여백이 있어야 함
 - 각 체크박스 항목은 bootstrap4 btn 클래스를 사용하므로 재설정
 */
#contact-form .choice-wrap {
}

#contact-form .choice-wrap .choice-group {
    display: flex;
    margin-bottom: 0;
    padding-left: 1%;
    justify-content: space-between;
    background-color: #EEE;

}

@media (max-width: 575.98px) {
    #contact-form .choice-wrap .choice-group {
        margin-bottom: 1rem;
        padding-left: 0;
        border-radius: .5rem;
    }

    #contact-form .choice-wrap .choice-group:last-child {
        margin-bottom: 0;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    #contact-form .choice-wrap .choice-group {
        margin-bottom: 1rem;
    }

    #contact-form .choice-wrap .choice-group:nth-child(2n-1) {
        padding-left: 0;
        border-top-left-radius: .5rem;
        border-bottom-left-radius: .5rem;
    }

    #contact-form .choice-wrap .choice-group:nth-child(2n) {
        border-top-right-radius: .5rem;
        border-bottom-right-radius: .5rem;
    }

    #contact-form .choice-wrap .choice-group:nth-child(n+3) {
        margin-bottom: 0;
    }

    #contact-form .choice-wrap .choice-group:last-of-type {
        border-top-right-radius: .5rem;
        border-bottom-right-radius: .5rem;
    }
}

@media (min-width: 992px) {
    #contact-form .choice-wrap .choice-group:first-child {
        padding-left: 0;
        border-radius: .5rem 0 0 .5rem;
    }

    #contact-form .choice-wrap .choice-group:last-of-type {
        border-radius: 0 .5rem .5rem 0;
    }
}

#contact-form .choice-wrap .choice-group .btn {
    flex: 0 1 100%;
    margin-bottom: 0;
    padding: .5rem;
    border-radius: .5rem;
    box-shadow: none;
    cursor: pointer;
    position: relative;
}

#contact-form .choice-wrap .choice-group .btn:after {
    display: none;
    position: absolute;
    top: .1rem;
    right: .5rem;
    content: "\2715";
    font-size: 10px;
}

#contact-form .choice-wrap .choice-group .btn.focus,
#contact-form .choice-wrap .choice-group .btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

#contact-form .choice-wrap .choice-group .btn:not(:disabled):not(.disabled).active:after,
#contact-form .choice-wrap .choice-group .btn:not(:disabled):not(.disabled):active:after {
    display: block;
}

#contact-form .choice-wrap .choice-group .btn-green {
    background-color: #EEE;
    border-color: #EEE;
    color: #818181;
}

#contact-form .choice-wrap .choice-group .btn-green:hover {
    background-color: #DCDCDC;
    border-color: #DCDCDC;
    color: #818181;
}

#contact-form .choice-wrap .choice-group .btn-green:not(:disabled):not(.disabled).active:hover,
#contact-form .choice-wrap .choice-group .btn-green:not(:disabled):not(.disabled):active:hover {
    background-color: #50C04C;
    border-color: #50C04C;
    color: #FFF;
    font-weight: 900;
}

#contact-form .choice-wrap .choice-group .btn-green:not(:disabled):not(.disabled).active,
#contact-form .choice-wrap .choice-group .btn-green:not(:disabled):not(.disabled):active,
#contact-form .choice-wrap .choice-group .show > .btn-green.dropdown-toggle {
    background-color: #60D05C;
    border-color: #60D05C;
    color: #FFF;
}


/** 문의 폼: 문의 포함 포트폴리오 */
#contact-form .portfolio {
    margin-bottom: 1rem;
}

#contact-form .portfolio:last-of-type {
    margin-bottom: 0;
}

#contact-form .portfolio .num {
    color: rgb(130, 130, 130);
    font-size: 1.1rem;
}

#contact-form .portfolio .img {
    padding: .5rem 0 .3rem;
}

#contact-form .portfolio .img img {
    border-radius: 1rem;
}

#contact-form .portfolio .title {
    font-size: 1rem
}