html{
    background: #f5f5f5;
}
body,p,ul,li{
    font-family: PingFangSC-Regular,Microsoft YaHei,SimSun;
    padding: 0;
    margin: 0;
}
ul,li{
    list-style: none;
}
body{
    background: #EDF4FC;
    height: 100vh;
    min-height: 612px;
    min-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
header{
    background: #FFFFFF;
    box-shadow: 0 1px 4px 0 rgba(0,21,41,0.12);
    height: 80px;
    line-height: 80px;
    padding-left: 48px;
    display: flex;
    align-items: center;
    justify-content: left;
}
header img{
    width: 40px;
    height: 40px;
}
header div{
    margin-left: 16px;
}
header p:first-child{
    font-size: 22px;
    color: #496DA9;
    line-height: 33px;
}
header p:last-child{
    font-size: 16px;
    color: #496DA9;
    line-height: 22px;
}
.main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
main .banner{
    width: 460px;
    height: auto;
}
@media screen and (max-width: 1111px) {
    main .banner {
        display: none;
    }
}
main .form{
    width: 296px;
    padding: 60px;
    /*height: 312px;*/
    background: #FFFFFF;
    box-shadow: 0 4px 16px 0 rgba(2,31,72,0.39);
    border-radius: 4px;
}
.form .title{
    font-size: 20px;
    color: rgba(0,0,0,0.7);
    margin-bottom: 18px;
}
.form .input.input2 {
    border: 0;
    display: block;
}
.form img.captcha {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 4px;
    left: auto;
    right: 0;
    cursor: pointer;
}
.form input.code {
    border: 1px solid #d9d9d9;
    width: 100px;
    text-indent: 10px;
}
.form input:active,.form input:hover{
    border: 1px solid #50B2F4;
}
.form img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    padding: 0 14px;
}
.form input{
    width: 296px;
    padding-left: 44px;
    border: none;
    outline:none;
    flex: 1;
    height: 90%;
    line-height: 40px;
    font-size: 16px;
    color: rgba(0,0,0,0.7);
    letter-spacing: 3px;
}
.form .input{
    position: relative;
    width: 296px;
    height: 45px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    transition: all .5s ease;
}
.form input::-webkit-input-placeholder{
    color: #D9D9D9;
}
.form input::-moz-placeholder{
    color: #D9D9D9;
}
.form input:-ms-input-placeholder{
    color: #D9D9D9;
}
.form .button{
    background-image: linear-gradient(78deg, #2C98F2 3%, #50B2F4 100%);
    border-radius: 4px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    box-shadow: 0 4px 16px 0 rgba(2,31,72,0.39);
    cursor: pointer;
    border: none;
    outline: none;
}
.form .button:hover{
    background-image: linear-gradient(78deg, #1b87d1 3%, #40a1d3 100%);
}
.form .button:active{
    background-image: linear-gradient(78deg, #1680d0 3%, #3091c9 100%);
}
footer{
    background: #FFFFFF;
    box-shadow: 0 -1px 4px 0 rgba(0,21,41,0.12);
    height: 64px;
    text-align: center;
    line-height: 64px;
    font-size: 12px;
    color: rgba(0,0,0,0.45);
}
.form .error{
    font-size: 12px;
    color: #FF4D4F;
    height: 20px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    /*opacity: 0;*/
}
.form .error img{
    position: relative;
    padding: 0 8px 0 0;
}

.alert {
    max-width: 500px;
    margin: auto;
    padding: 20px;
    font-size: 1.2rem;
}

@media screen and (max-width: 600px) {
    body {
        width: 100%;
        min-width: initial;
    }
    header {
        height: 60px;
        line-height: 60px;
        padding-left: 24px;
    }
    header img{
        width: 22px;
        height: 22px;
    }
    header div{
        margin-left: 8px;
    }
    header p:first-child{
        font-size: 14px;
        line-height: 16px;
    }
    header p:last-child{
        font-size: 10px;
        line-height: 12px;
    }
    main .banner{
        display: none;
    }
    main .form{
        width: 80vw;
        padding: 20px;
    }
    .form .input{
        width: 80vw;
    }
    footer{
        height: 40px;
        line-height: 40px;
    }
}

/***********************************************/

.modal {
    width: 914px;
    height: 601px;
    position: absolute;
    left: -725px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: url('https://image.haoyunqi.com.cn/FhWBQQvkYqk4B8TUvLYwgEPTpxnF') center no-repeat;
    background-size: contain;
    display: none;
}
.modal-close {
    display: inline-block;
    width: 54px;
    height: 54px;
    background: url('data:image/png;base64,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') no-repeat center;
    background-size: contain;
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
}
.modal-close:hover {
    opacity: .9
}
.modal-close:active {
    opacity: .8;
}
.modal-button {
    width: 100%;
    position: absolute;
    bottom: 60px;
    text-align: center;
}
.modal-contact {
    position: absolute;
    color: #b83d39;
    font-weight: normal;
    font-size: 16px;
    bottom: 160px;
    left: 110px;
}
.contact-row-1 {
    display: inline-block;
    padding: 5px;
    border-bottom: 1px solid #ffffff;
    color: #ffffff;
}
.contact .contact-phone {
    display: inline-block;
    width: 18px;
    height: 19px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAATCAYAAACdkl3yAAABjklEQVQ4jZXTv0uVURzH8Ze3K0mRRoPTxRzELagEszCpwX64GQ0OEkhEEBE0tDhEjekgtSQtNjSI7tUgNfTL26ANNgRCPQT1B5RRkd2Gc4KHw+P13s/yfc7385z385zD99PyuatfomO4isd4lJqpKlkVlHO9TkzhKH7jDD7i1XYwKMW6G4s4gHOxLmEOO5sB3UY3+vA+9mawD4PNgAbwOvHe4BlO596rCyphTbiXHYm/hOOoNQL6iwWMYTPxJ3C3URB8QIbzOa8/+vPbQfKgL3grzFAp53XjYDOgGm7hEkZibxmreIiORkGwjie4gD2xN4F2PIjrllj31gPBRRzG9bj+ikmcxT3cxwaeSo6cgr7hTgSejL159GJIuLMhYb5WhRSEXy0IbWs80owQnf/ahR/xuYxxzGKgklXfFYEIdzGLQ7gcv16kGziCya1Gv4ZrQvpfCiEu0jT+UD9Dv4Rpn8YKbmJ/zm/FKSHUP7c6WpGeoyfWTXzHFZyoZNUX5Xo7E40KwzqMT2hDeyWrbsA/m8NS+0nf/mkAAAAASUVORK5CYII=') no-repeat center;
    background-size: 100%;
    position: relative;
    top: 3px;
}
@media screen and (max-width: 1500px), screen and (max-height: 800px) {
    .modal {
        width: 692px;
        height: 455px;
        top: 22px;
        left: -500px;
    }
    .modal-contact {
        left: 85px;
        bottom: 115px;
        font-size: 14px;
    }
    .modal-close {
        width: 40px;
        height: 40px;
        right: 11px;
    }
}
@media screen and (max-width: 1200px) {
    .modal {
        display: none !important;
    }
}