body {
    background: #EEF1F1;
}

.main {
    width: 1080px;
    margin: auto;
}

.header_logo {

}

.header_logo .logobox {
    width: 50%;
    box-sizing: border-box;
    padding: 22.5px;
}

.header_logo .logobox img {
    width: 100%;
}

.header_title {
    text-align: center;
    color: #fff;
    font-weight: 500;
    width: 100%;
    background: var(--bg-color);
    padding: 22.5px 0;
    margin: 0;
}

.login_form {
    width: 100%;
    padding: 50px 0;
    padding-bottom: 150px;
    margin: 0;
    background: #FFF;
    font-size: 16px;
}

.login_form .block {
    /*width: 378px;*/
    position: relative;
    text-align: center;
    border: 1px solid rgba(212, 216, 216, 1);
    margin: auto;
    padding: 0;
}

.getcert {
    width: 100%;
    padding: .5em 0 7em;
    margin: 0;
    background: #FFF;
    font-size: 16px;
}

.getcert .block {
    width: 100%;
    position: relative;
    text-align: center;
    margin: 1.25em auto;
    border: 1px solid rgba(212, 216, 216, 1);
}

.block input {
    width: 100%;
    height: 3.25em;
    box-sizing: border-box;
    padding-left: 50px;
    background: rgba(255, 255, 255, 1);
    color: #333333;
    font-size: 1em;
    border: 1px solid rgba(212, 216, 216, 1);
}

.block input::-webkit-input-placeholder {
    width: 100%;
    height: 3.25em;
    box-sizing: border-box;
    border: none;
    padding-left: 50px;
    background: rgba(255, 255, 255, 1);
    color: rgba(146, 155, 155, 1);
    font-size: 1em;
}

.block input::-webkit-input-placeholder {
    padding: 0
}

.block .icon {
    position: absolute;
    top: .75em;
    left: 1em;
    width: 2em;
    height: 2em;
}

.block.check {
    border: none;
    text-align: left;
}

.block p.getcode {
    color: var(--bg-color);
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 3em;
}

.block.check .checkbox {
    display: none;
}

.block.check label.checktex {
    display: inline-block;
    width: 1em;
    height: 1em;
    position: relative;
    top: .3em;
    left: -.2em;
    margin: .1em;
    border: 2px solid rgba(212, 216, 216, 1);
    border-radius: 3px;
    background: #fff;
}

.block.check a {
    text-decoration: none;
}

.block.check .checkbox:checked + label.checktex {
    background-image: url("../../images/static/ps519f7e5061c3d2d4-a3f4-4d04-8120-d0c86921a399.png");
    background-size: cover;
}

.button {
    background: var(--bg-color);
    height: 3.25em;
    line-height: 3.25em;
    text-align: center;
    width: 378px;
    margin: auto;
    color: #FFF;
    cursor: pointer;
    border: 0;
}

.idcard {
    width: 48%;
    min-width: 135px;
    float: left;
    margin: 10px 10px 0 10px;
    background: rgba(238, 241, 241, 1);
    height: 200px;
    border-radius: .25em;
    overflow: hidden;
    position: relative;
}

.idcard a.img_box {
    transform: scale(1.5) translate(0, 25%);
    text-align: center;
    margin: auto;
    display: block;
}

.idcard a.img_box img {
    height: 88px;
}

.idcard .panel_footer {
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: 100%;
    background: var(--bg-color);
    margin-bottom: -200px;
}

.idcard .panel_footer a {
    text-indent: -9999px;
    float: right;
    margin: 10px 15px 0 15px;
}

.idcard .panel_footer span {
    display: block;
    width: 100%;
}

.idcard .idcard_title {
    padding: .25em;
    margin: 0;
    box-sizing: border-box;
    color: #FFF;
}

.tips {
    padding-top: 1em;
    font-size: 16px;
    color: rgba(32, 36, 36, 1);
}

.tips h5 {
    font-size: 0.9em;
    margin: 0;
}

.tips p {
    margin: 0;
    font-size: 0.9em;
}

.tips .tips_pic {
    display: flex;
    padding: 2em 0;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 18em;
}

.tips_pic .pic_box {
    width: 8em;
    height: 7em;
    padding: 0 0 .5em 0;
}

.tips .tips_pic img {
    width: 100%;
    height: 100%;
}

/*   icon  */
.icon01 {
    background-image: url("../../images/static/psd890f51ec61b5a2d-e7e5-4397-b081-583b412d173a.png");
    background-size: cover;
}

.icon02 {
    background-image: url("../../images/static/ps5913d9ac6e835ebe-d540-44db-8fa8-0bdc34a6ce4a.png");
    background-size: cover;
}

.icon03 {
    background-image: url("../../images/static/psfa1580fe339738f3-ddcc-4802-8e68-33d2e78b99da.png");
    background-size: cover;
}

.icon_upload {
    width: 1em;
    height: 1em;
    display: inline-block;
    position: relative;
    top: .1em;
    left: -.25em;
    background-image: url("../../images/static/pscdac4907564981c6-bc06-4429-8aa1-198ac6aa9579.png");
    background-size: cover;
}

.icon_watch {
    width: 1em;
    height: 1em;
    display: inline-block;
    position: relative;
    top: .1em;
    left: -.25em;
    background-image: url("../../images/static/pscdac4907564981c6-bc06-4429-8aa1-198ac6aa9579.png");
    background-size: cover;
}

.icon_stuff {
    width: 1em;
    height: 1em;
    display: inline-block;
    position: relative;
    top: .1em;
    left: -.25em;
    background-image: url("../../images/static/pscdac4907564981c6-bc06-4429-8aa1-198ac6aa9579.png");
    background-size: cover;
}

.login_form .block label {
    display: none;
}

.login_form .block {
    border: none;
}

.login_form button.getcode {
    position: absolute;
    cursor: pointer;
    top: .65em;
    right: 10px;
    color: #ffffff;
}

.block .popup {
    cursor: pointer;
}

.mdl-button--raised.mdl-button--colored > span.mdl-typography--title {
    color: #fff;
}

.idcard_box {
    width: 66em;
    font-size: 16px;
}

.block_box {
    display: flex;
    border: none;
    justify-content: space-between;
}

.register_box {
    width: 33em;
    margin: 0 40px;
    font-size: 16px;
    float: left;
}
.tip_box {
    float: left;
    width: 33%;
    height: 50px;
    text-align: center;
}

.paddingTop{
    padding-top: 180px;
}

@media screen and (orientation: portrait) {
    .idcard_box {
        width: 100%;
    }

    .block_box {
        display: flex;
        flex-direction: column;
    }

    .register_box {
        width: 100%;
        margin: 0;
        transform: translateY(-100px);
    }

    .idcard {
        width: 100%;
        margin: 20px 0;
    }

    .getcert {
        padding: 0 0 7em !important;
    }

    .tip_box {
        width: 100%;
        height: 50px;
        text-align: center;
    }

    .idcard_tip{
        transform: translateY(-270px);
    }
    .reg_photo_tip{
        transform: translateY(-120px);
    }
    .paddingTop{
        padding-top: 0;
    }
}