@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&display=swap');
body {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    font-family: Montserrat;
    font-size: 15px;
}
input.mobile {
    font-family: Montserrat;
    font-size: 13px;
    width: 75%;
    border: 1px solid #333;
    padding: 9px 12px;
    outline: none;
    border-radius: 3px;
}
main {
    width: 100%;
    display: inline-block;
}
main .form_area {
    width: 100%;
    max-width: 900px;
    margin: 100px auto;
}
main .form_area .form_details {
    display: inline-block;
    width: 100%;
    margin-bottom: 75px;
}
main .form_area h1 {
    display: inline-block;
    width: 100%;
    font-size: 24px;
}
main .form_area .form_details li {
    display: inline-block;
    width: 100%;
    list-style: none;
    max-width: 50%;
    padding: 10px 0;
    border-bottom: 1px dashed #e5e5e5;
}
main .form_area .form_details li span {
    float: right;
    font-weight: bold;
}
main .form_area .item {
    display: inline-block;
    width: 100%;
    padding: 12px 0;
    float: left;
}
main .form_area .item.hide {
    display: none;
}
main .form_area .item.input {}
main .form_area .item.input .a {
    max-width: 35%;
    margin-top: 15px;
}
main .form_area .item.input .q {
    max-width: 65%;
}
main .form_area .q {
    width: 100%;
    max-width: 80%;
    float: left;
}
main .form_area .q label {}
main .form_area .q h2 {
    display: inline-block;
    width: 100%;
    font-size: 20px;
    line-height: 30px;
}
main .form_area .q h2 small {
    display: inline-block;
    width: 100%;
    font-size: 12px;
    font-weight: 300;
}
main .form_area .a{
    max-width: 20%;
    margin-top: 35px;
    float: left;
    width: 100%;
    overflow: hidden;
}
main .form_area .a .icon {
    float: left;
    position: relative;
    top: 5px;
    left: 0;
    margin-right: 10px;
}
main .form_area .a .icon svg {
    width: 20px;
    height: 20px;
    display: inline-block;
    fill: #555;
    position: relative;
    top: 2px;
}
main .form_area .a span.checker {
    display: inline-block;
    background-color: #eeeeee;
    padding: 6px 20px;
    font-size: 14px;
    color: #999;
    border-radius: 35px;
    cursor: pointer;
    font-weight: normal;
    margin-right: 14px;
    transition: all 0.4s;
}
main .form_area .a span.checker.y_c {
    background-color: #4caf50;
    color: #fff;
}
main .form_area .a span.checker.y_c:before {
    content: '';
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 10px;
}

main .form_area .a span.checker.n_c {
    background-color: #f44336;
    color: #fff;
}
main .form_area .a span.checker.n_c:before {
    content: '';
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M175 175C184.4 165.7 199.6 165.7 208.1 175L255.1 222.1L303 175C312.4 165.7 327.6 165.7 336.1 175C346.3 184.4 346.3 199.6 336.1 208.1L289.9 255.1L336.1 303C346.3 312.4 346.3 327.6 336.1 336.1C327.6 346.3 312.4 346.3 303 336.1L255.1 289.9L208.1 336.1C199.6 346.3 184.4 346.3 175 336.1C165.7 327.6 165.7 312.4 175 303L222.1 255.1L175 208.1C165.7 199.6 165.7 184.4 175 175V175zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z'/%3E%3C/svg%3E");
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 10px;
}
main .item_1_info {
    display:none;
}
main .item_1_info p {
    font-size: 14px;
    display: inline-block;
    width: 100%;
    line-height: 25px;
    max-width: 85%;
}
main .item_1_info p em {
    color: #f44336;
}
.item_box {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 20px 0 15px 0;
    float: left;
    display: none;
    border-top: 1px solid #b2b2b2;
}
.item_box .input_item {
    display: inline-block;
    width: 300px;
    margin-right: 50px;
    margin-bottom: 25px;
}
.item_box .input_item input {
    font-family: Montserrat;
    font-size: 13px;
    width: 100%;
    border: 1px solid #333;
    padding: 9px 12px;
    outline: none;
    border-radius: 3px;
}
.item_box h2 {
    font-size: 18px;
    text-align: left;
    padding-bottom: 20px;
}
.item_box_area {
    display: inline-block;
    width: 100%;
}
main .form_area .q h2.sub_item_title{font-size: 16px;font-weight: 400;}
main .form_area .q h2 a {
    text-decoration: none;
    border-bottom: 1px dashed #3f51b5;
    color: #3f51b5;
}
.button_area {
    display: inline-block;
    width: 100%;
    margin-top: 35px;
}
.button_area button {
    display: inline-block;
    background-color: #4caf50;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-family: Montserrat;
    font-size: 15px;
    padding: 12px 40px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    display: none;
}
.modal {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    background-color: #7070709c;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease;
}
.modal h2 {
    display: inline-block;
    width: 100%;
    font-size: 20px;
}
body.showing .modal {top:0;}
.modal p {}
.modal_area {
    display: inline-block;
    width: 100%;
    max-width: 500px;
    background-color: #fff;
    border-radius: 4px;
    padding: 15px 35px;
}
@media screen and (max-width: 999px) {
    main .form_area .a {max-width: 100% !important;margin-top: 0 !important;}
    main .form_area .q {
    max-width: 95% !important;
}
    main .form_area {
        max-width: 95%;
        padding-left: 5%;
        display: inline-block;
    }
    main .form_area .form_details li {
        max-width: 90%;
    }
}
