body {
    font-size: 16px;
    overflow-x:hidden;
}

* {
    padding: 0;
    margin: 0;
    font-family: 微软雅黑, "Microsoft YaHei", 'Microsoft JhengHei', Arial;
}

:focus {
    outline: none;
}
/*for IE*/
::-moz-focus-inner {
    border-color: transparent;
}
/*for mozilla*/
ul, nav, body, h1, h2, h4, h6, p, figure {
    margin: 0;
    padding: 0;
}

a, button {
    transition: all 0.3s ease;
}

/* Bootstrap grid system  */

html {
    box-sizing: border-box;
    -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

.container {
    margin: 0 auto; 
    overflow:hidden;
}

.copyright {
    width: 100%;
    margin: 20px auto;
    float: left;
    position: relative;
    text-align:center;
}

    .copyright li {
        display: inline-block;
        margin-left: 5px;
    }

.bg1 {
    background: url(../img/rec_bg_1.png) no-repeat center center #066F85;
    background-size: 100%;
}

.bg2 {
    background: url(../img/rec_bg_2.png) no-repeat center center #E79830;
    background-size: 100%;
}

.bg3 {
    background: url(../img/rec_bg_3.png) no-repeat center center #066F85;
    background-size: 100%;
}

.bg4 {
    background: url(../img/rec_bg_4.png) no-repeat center center #066F85;
    background-size: 100%;
}

table {
    width: 100%;
}

    table th {
        padding: 8px 4px;
        text-align: right;
    }

    table td {
        padding: 8px 4px;
        text-align: left;
        ;
    }

input[type='text'], select {
    height: 30px;
    width: 250px;
    border: none;
    border-bottom: solid 1px #000;
}

.login1 {
    position: relative;
    width:740px;
    margin: 30px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 32px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
}

.login {
    position: relative;
    width: 740px;
    margin: 30px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 32px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
}

.answer {
    position: relative;
    width: 740px;
    margin: 30px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 32px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
}

.letter {
    position: relative;
    width: 740px;
    margin: 30px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
}

.lettertext p {
    color: #595959;
    margin-right: auto;
    margin-left: auto;
    text-indent: 50px;
    letter-spacing: 1px;
    line-height: 40px;
    padding: 4px;
    font-size: 20px;
    width: 90%;
    border-bottom: dashed 2px #D8B47B;
}

.logo {
    width: 100%;
    padding: 20px;
    height:80px;
}
    .logo > * {
        float:left;
    }

    .logo label {
        color: #fff;
        font-size: 26px;
        padding: 5px 10px;
    }

.title_1 {
    background: url(../img/rec_title_1.png) no-repeat #fff;
    background-size: 100%;
    width: 300px;
    height: 160px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    padding-top: 35px;
}

    .title_1 h1, h4 {
        margin: 10px;
    }

.button_1 {
    width: 250px;
    height: 85px;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 8px 16px;
    border-radius: 32px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    background-color: #E6972F;
    color: #fff;
    border: none;
    cursor: pointer;
    background: url(../img/ico_2.png) no-repeat center right #E6972F;
    background-size: 14%;
    background-position-x: 195px;
}

.button_2 {
    margin: 2px;
    width: 100px;
    height: 35px;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 4px 8px;
    border-radius: 32px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    background-color: #E6972F;
    color: #fff;
    border: none;
    cursor: pointer;
}

.button_3 {
    margin: 2px;
    width: 30px;
    height: 35px;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 2px 2px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background-color: #E6972F;
    color: #fff;
    border: none;
    cursor: pointer;
}
    .button_3[selected] {
        background-color: #056F85;
    }

.button_4 {
    margin: 2px;
    width: 100px;
    height: 35px;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 4px 8px;
    border-radius: 32px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    background-color: #056F85;
    color: #fff;
    border: none;
    cursor: pointer;
}

.button_start {
    z-index: 9;
    width: 100px;
    height: 160px;
    font-size: 16px;
    letter-spacing: 1px;
    padding-top: 50px;
    color: #fff;
    border: none;
    cursor: pointer;
}

.button_link {
    margin: 2px 0 0 8px;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 3px 4px;
    border-radius: 32px;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    color: #C74233;
    background-color: #DDD;
    border: none;
    cursor: pointer;
}

.btn_ico {
    display: inline;
    margin: 5px 5px;
}

.bg_tsz {
    background: url(../img/ico_7.png) no-repeat center center;
    background-size: 100%;
}

.bg_tsz_ok {
    background: url(../img/ico_7_ok.png) no-repeat center center;
    background-size: 100%;
}

.bg_gcz {
    background: url(../img/ico_8.png) no-repeat center center;
    background-size: 100%;
}

.bg_gcz_ok {
    background: url(../img/ico_8_ok.png) no-repeat center center;
    background-size: 100%;
}

.cerate_shop_ul {
    position: relative;
    counter-reset: step;
    text-align: center;
    white-space: nowrap;
    width: 700px;
    margin: 10px auto;
}

    .cerate_shop_ul li {
        display: inline-block;
        white-space: pre-wrap;
        cursor: pointer; 
        position: relative;
        margin:0 25px;
        height: 90px;
        width: 90px;
        background: #EBEBEB;
        text-align: center;
        padding: 35px 5px;
        border-radius: 50%;
    }

        .cerate_shop_ul li:first-child:before {
            width: 0;
            height: 0;
            background-color: #FFF;
        }

        .cerate_shop_ul li:last-child:after {
            width: 0;
            height: 0;
            background-color: #FFF;
        }

        .cerate_shop_ul li:before {
            z-index: -1;
        }

        .cerate_shop_ul li:after {
            content: '';
            width: 100%;
            height: 2px;
            background-color: #EBEBEB;
            position: absolute;
            left: 60%;
            top: 45px;
            z-index: -1;
        }

    .cerate_shop_ul .active {
        color: #fff;
        background: #056F85
    } 

    .cerate_shop_ul li[complete] {
    }
    .cerate_shop_ul li[processing] {
    }
    /*将当前/完成步骤之前的数字及连接线变绿*/
    .cerate_shop_ul li.active:before,
    .cerate_shop_ul li.active:after {
        background-color: #056F85;
    }

    /*将当前/完成步骤之后的数字及连接线变灰*/
    .cerate_shop_ul li.active ~ li:before,
    .cerate_shop_ul li.active ~ li:after {
        background-color: #EBEBEB;
    }

.contact {
    position:absolute;
    top:1%;
    right:1%;
}
    .contact span {
        color: #1F8D76;
        letter-spacing:2px;
        font-size:18px;
        white-space: pre-wrap; 
        font-weight:bolder;
        cursor: pointer;
        display: inline-block;
        position: relative;
        height: 90px;
        width: 90px;
        background: #FFF;
        text-align: center;
        padding: 27px 7px;
        border-radius: 50%;
    }

.loginout {
   display:inline-block;
   position:  absolute;
   top:25px;
   right:20px;
   z-index:999;
}

    .loginout span {
        color: #FFF;
        font-size: 14px;
        letter-spacing: 2px;
        white-space: pre-wrap;
        cursor: pointer;
        font-weight: bolder;
        border: solid 0px #EBEBEB;
        padding: 6px 12px;
        border-radius: 8px;
        background-color: #E9932F;
    }

.btn_result {
    width: 250px;
    height: 30px;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 3px 20px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    color: #fff;
    border: none;
    cursor: pointer;
}

.btn_txj {
    background: url(../img/ico_10.png) no-repeat center center #E6972F;
    background-size: 100%;
}

.btn_ysj {
    background: url(../img/ico_11.png) no-repeat center center #E6972F;
    background-size: 100%;
}

.btn_zxj {
    background: url(../img/ico_12.png) no-repeat center center #E6972F;
    background-size: 100%;
}

.btn_fmj {
    background: url(../img/ico_13.png) no-repeat center center #E6972F;
    background-size: 100%;
}

.memo_1 {
    padding: 12px 58px;
    color: #000;
    background: none;
    background: url(../img/ico_14.png) no-repeat center center;
    background-size: 100%;
}

.label1 {
    display: inline-block;
    width: 120px;
    height: 30px;
    padding: 6px 4px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background-color: #056F85;
    color: #fff;
}

.label2 {
    display: inline-block;
    width: 120px;
    height: 30px;
    padding: 6px 4px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background-color: #C74233;
    color: #fff;
}

#quetable {
    width: 90%;
    margin: 5px auto;
}

    #quetable td {
        padding: 5px;
        text-align: left;
        font-size: 18px;
        letter-spacing:2px;
    }
    #quetable tr[customseq] td{ 
        padding-top:30px;
    }


    #quetable td > span:first-child {
        background-color: #E6972F;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        color: #fff;
        padding: 4px 8px;
        margin-right: 10px;
        font-size: 16px;
    }

            #quetable td > span:last-child {
            }

        #quetable td > label {
            padding: 4px;
            letter-spacing: 3px;
            font-size: 14px;
        }

.webdialog .layui-layer-title {
    background: #C74233;
    color: #fff;
    border: none;
}

.webdialog .layui-layer-btn {
    border-top: 1px solid #E9E7E7
}

    .webdialog .layui-layer-btn a {
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        background-color: #E6972F;
        color: #fff;
        border:none; 
    }

    .webdialog .layui-layer-btn .layui-layer-btn1 {
        background: #999;
        border: none; 
    }

.context {
    border: solid 1px dashed;
    background-color: #D1E0E5;
    width:90%;
    height:200px;
}

.result_table {
    letter-spacing: 1px;
    text-align: center;
    color: #000;
    text-indent: 20px;
}
    .result_table td { 
        padding:6px;
        line-height:20px;
    }
    .result_td_1 {
        text-align: center;
        color:#fff;
        padding:6px 0;
    }
    .result_td_1 span {
        font-size:26px;
        margin:2px 6px;
    }
.result_div1 {
    background-color: #D1E0E5;
    width:90%;
    margin:10px auto;
    padding:10px 0;
}
.result_div2 {
    width: 90%;
    margin: 10px auto;
    border: dashed 1px #808080;
    padding: 8px;
    color:#000;
}
.result_td_2 {
    text-align: center;
    color: #000;
    height:50px;
}
    .result_td_2 span:first-child { 
        height: 30px;
        padding:6px 12px;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        background-color: #056F85;
        color: #fff;
        margin-right:6px;
    }
.bt_td {
    background: #fff url(../img/necessary.png) right top no-repeat;
}
input[id='mail']::-webkit-input-placeholder {
    color: #C00000;
}

input[id='mail']::-moz-input-placeholder {
    color: #C00000;
}

input[id='mail']::-ms-input-placeholder {
    color: #C00000;
}