body {
    background-color: #DCDCDC;
}

.form-top {
    padding-top: min(6.25vw, 120px);
}

.form-top__title {
    font-size: clamp(26px, 2.916vw, 56px);
}

.form-top__text {
    padding-bottom: min(2.08vw, 40px);
    margin-top: 10px;
    font-size: clamp(16px, .93vw, 18px);
    border-bottom: 1px solid #4D4544;
}

.form-body {
    position: relative;
    padding-bottom: min(5.208vw, 100px);
    margin-top: min(4.166vw, 80px);
}

.form-body .chat-with-us {
    position: absolute;
    right: min(10.416vw, 200px);
    bottom: min(17.18vw, 330px);
    display: block;
    width: min(12.81vw, 246px);
}

.form-body form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: min(2.083vw, 40px);
}

.form-body label {
    font-size: min(1.354vw, 26px);
    color: #6D605B;
}

.form-body .input-item {
    width: min(54.16vw, 1040px);
    height: min(4.16vw, 80px);
    margin-top: min(1vw, 20px);
    border-bottom: 1px solid #AEAFAF;
}

.form-body .input-item input {
    display: block;
    width: 100%;
    height: 100%;
    padding-left: clamp(10px, .1vw, 20px);
    outline: none;
    border: none;
    font-size: min(.93vw, 18px);
}

.form-body .form-item {
    position: relative;
}

.form-body .form-item .error-message {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(0);
    opacity: 0;
    visibility: hidden;
    font-size: min(.93vw, 18px);
    color: #B4242F;
    transition: transform .3s, opacity .3s, visibility .3s;
}

.form-body .form-item .error-class.has-error {
    transform: translateY(100%);
    opacity: 1;
    visibility: visible;
}

.form-body .form-item .captcha-input {
    display: flex;
}

.form-body .form-item .captcha-input .captcha-img {
    height: 100%;
    cursor: pointer;
}

.form-body .input-item.textarea-item {
    height: auto;
}

.form-body .textarea-item textarea {
    display: block;
    width: 100%;
    padding-left: clamp(10px, .1vw, 20px);
    padding-top: clamp(10px, .1vw, 20px);
    resize: none;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: min(.93vw, 18px);
}

.form-policy label {
    display: inline-flex;
    gap: 10px;
    font-size: min(1.354vw, 26px);
    line-height: 1.5;
}

.form-policy .form-policy__checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    margin-top: min(.416vw, 9px);
    border: 1px solid rgba(0, 0, 0, .2);
    transition: background-color .3s;
    cursor: pointer;
    background-color: #fff;
}

.form-policy .form-policy__text {
    flex: 1;
}

.form-policy__text p {
    display: flex;
    align-items: center;
    line-height: 1.5;
}

.form-policy__text .policy-tips {
    display: block;
    width: clamp(15px, 1.1458vw, 22px);
    height: clamp(15px, 1.1458vw, 22px);
    margin-top: min(.3vw, 5px);
    margin-left: 5px;
}

.form-policy__text .policy-tips img {
    width: 100%;
}

.form-policy label input:checked+.form-policy__checkbox {
    background-color: #877F6A;
}

.form-policy.has-error .form-policy__text {
    color: #B4242F;
    animation: shakeX 1s linear;
}

@-webkit-keyframes shakeX {

    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
}

@keyframes shakeX {

    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
}

.form-submit {
    width: min(14.58vw, 280px);
    height: min(3.125vw, 60px);
    background-color: #877F6A;
    border: none;
    color: #fff;
    font-size: min(1.25vw, 24px);
    cursor: pointer;
}

@media screen and (max-width: 760px) {

    .u-px-200 {
        padding-inline: 20px;
    }

    .form-body form {
        gap: 20px;
    }

    .form-body .input-item {
        width: 100%;
    }

    .form-body .input-item input {
        font-size: 18px;
    }

    .form-body label {
        font-size: 20px;
    }

    .form-body .input-item {
        height: 50px;
    }

    .form-body .textarea-item textarea {
        font-size: 18px;
    }

    .form-body .form-item .error-message {
        font-size: 16px;
    }

    .form-submit {
        width: 200px;
        height: 50px;
        font-size: 20px;
    }

    .form-body .chat-with-us {
        position: fixed;
        bottom: 5vh;
        z-index: 3;
        right: 20px;
        width: 100px;
    }
}