body { background-color: #f8f8f8; color: #fff;font-family:"Microsoft Yahei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,  SimHei, "\5B8B\4F53", simsun, sans-serif;}
html,body { height: 100%;}
img { max-width: 100%;}
ol,ul { margin: 0; padding: 0;}
li { list-style: none;}
em { font-style: normal; }
input { -webkit-appearance: none; }
input::-webkit-input-placeholder { opacity: .3;}


.box { height: 100%; background:#7dcd3b url(../images/form_bg.png) no-repeat center top; background-size: contain; -webkit-display: flex; display: flex; -webkit-flex-direction: column;flex-direction: column; max-width: 450px; margin: auto;}

.box-info { text-align: center;-webkit-flex: 1;flex: 1;}
.box-info .tit { margin: 4vh auto;}
.box-info .t1 { height: .9rem;}
.box-info .t2 { height: .38rem; margin-top: .2rem;}
.box-info .txt { line-height: 1.7; margin: 4vh auto;}
.box-info .txt em { font-weight: 700; margin-left: .2em;}

.form-foot { text-align: center; background-color: #fff; font-size: .24rem; color: #888; padding: 3vh .57rem;}
.form-foot .txt { margin-top: .8em;}
.form-foot img { max-width: 351px; width: 100%;}
.m-form { background-color: #fff; margin: 0 .57rem; padding: 0 .26rem; color: #333; border-radius: .3rem .3rem 0 0;}
.form-tit { text-align: center; font-size: .4rem; color: #66c22d; padding: 13px; margin: auto; font-weight: 400;}
.m-form li { position: relative; height: 42px; margin-top: 1vh;}
.m-form li:first-child { margin-top: 0;}
.m-form li .u-ipt { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: #f1f1f1; border:#f1f1f1 solid 1px;border-radius:3px;  outline: none; font-size: 16.5px; padding: 0 1em;}
.m-form li .u-ipt:focus { border: #8cd444 solid 1px; box-shadow: 0 0 3px rgba(140,212,68,1);}
.fbottom,
.htop,
.mcenter { -webkit-flex: 1;flex: 1;}

.fbottom { background-color: #fff; max-height: .5rem; margin-top: -1px;}

.m-form .ico { position: relative;}
.m-form .ico .u-ipt { padding-left: 2.8em;}
.m-form .ico::after { content: ''; width: 24px; height: 24px; position: absolute; left: 10px; top: 0; bottom: 0; margin: auto; z-index: 3; background-repeat: no-repeat; background-position: center center; background-size: contain;}
.ico.UserName::after { background-image: url(../images/ico_1.png);}
.ico.Company::after { background-image: url(../images/ico_2.png);}
.ico.Position::after { background-image: url(../images/ico_3.png);}
.ico.Mobile::after { background-image: url(../images/ico_4.png);}
.ico.Email::after { background-image: url(../images/ico_5.png);}

/* 按钮动画 */
[data-ripple] { display: inline-block; vertical-align: middle; overflow: hidden; cursor: pointer;}
.ripple-container .ripple {
    background-color: rgba(255, 255, 255, 0.4);
    animation: ripple 800ms forwards cubic-bezier(0, 0, 0.2, 1);
    -webkit-animation: ripple 800ms forwards cubic-bezier(0, 0, 0.2, 1);
}
@-webkit-keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    80% {
        transform: scale(1);
    }

    100% {
        opacity: 0;
    }
}
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    80% {
        transform: scale(1);
    }

    100% {
        opacity: 0;
    }
}
/* 按钮动画  end */