@media screen and (max-height: 800px) {
    .block-form {

    }
}

.block-form{
    background-image: url(/webasset/liitu/web/images/counsel/block-form-01.png);
    background-repeat: no-repeat;
    background-size:100% 100%;
    padding-top: 100px;
    padding-bottom:80px;
    .left{
        background-image: url(/webasset/liitu/web/images/counsel/block-form-02.png);
        background-repeat: no-repeat;
        background-size:cover;
        position: relative;
        height: 100%;
        width: 100%;
        border-top-left-radius: 24px;
        border-bottom-left-radius: 24px;
        .title{
            font-weight: bold;
            color: #1B2337;
            text-align: center;
            padding-top: 100px;
        }
        .explain{
            line-height: 30px;
            color: #505A71;
            padding: 20px 40px 40px 60px;
        }
        .tip{
            color: #505A71;
            line-height: 24px;
            padding-left: 24px;
            padding-right: 24px;
            position: absolute;
            left: 24;
            bottom: 40px;
        }
        .list{
            position: absolute;
            left: 0px;
            bottom: 120px;
            width: 100%;
            .item{
                display: flex;
                background: rgba(255,255,255, 0.88);
                height: 80px;
                margin-left: 24px;
                margin-right: 24px;
                border-radius: 12px;
                padding-left: 24px;
                align-items: center;
                margin-top: 16px;
                >img{
                    width: 24px;
                    height: 24px;
                }
                >div{
                    color: #505A71;
                    margin-left: 16px;
                }
            }
        }

    }
    .right{
    background: #FFFFFF;
    box-shadow: 0px 4px 32px 0px rgba(229,225,255,0.32);
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    padding: 18px;

    position: relative;
    .header-tip{
        color: #61687C;
        margin-bottom: 20px;
    }
    .item{
        margin-bottom: 16px;
        .title{
            color: #61687C;
            width: 140px;
            line-height: 38px;
            .must{
                color: #c80000;
                margin-left: 10px;
                vertical-align: sub;
            }
        }
        .input-val{
            width: 100%;
        }
        .cust-checkbox{
            padding-top: 10px;
            color: #505A71;
            .checkbox-inline{
                margin-right: 12px;
            }
        }
    }
    .form-control{
        &:focus{
            border-color:#5133FF;
            box-shadow: 0 0 0 .2rem rgba(81, 51, 255,0.25);
        }
        &::-moz-placeholder {
          color: #999;
          opacity: 1;
        }
        &::-ms-input-placeholder {
          color: #999;
        }
        &::-webkit-input-placeholder {
          color: #999;
        }
    }
    .privacy{
        text-align: center;
        .agreement-title{
            color: #505A71;
            margin-left: 10px;
        }
        .agreement-href{
            color: #5133FF;
            margin-left: 10px;
            cursor: pointer;
            &:hover{
                text-decoration: underline;
            }
        }
    }
    .but{
            display: flex;
            justify-content: center;
           .submit{
                margin-top: 30px;
                width: 146px;
                height: 48px;
                border-radius: 12px;
                line-height: 48px;
                text-align: center;
                font-size: 20px;
                color: #fff;
                background: linear-gradient(90deg, var(--form-but-start-color) 0%, var(--form-but-end-color) 100%);
                transition: --form-but-start-color 0.8s ease, --form-but-end-color 0.8s ease, transform 0.8s ease;
                &:hover{
                    --form-but-start-color: #2E64FF;
                    --form-but-end-color: #A163FF;
                    transform: translateY(-4px);
                    box-shadow: 0 6px 20px 0 rgba(161, 99, 255,.6);
                }
            }
    }
    }
}

 @property --form-but-start-color {
    syntax: '<color>';
    initial-value: #A163FF;
    inherits: false;
}

@property --form-but-end-color {
    syntax: '<color>';
    initial-value: #2E64FF;
    inherits: false;
}

@media screen and (max-width: 1024px) {
    .block-form{
        .left{
            min-height: 700px;
            border-radius: 24px;
        }
        .right{
            border-radius: 24px;
            .form-control{
                font-size: 14px;
            }
        }
    }

}