body{background:linear-gradient(-45deg,#ffdec4,#ffebe2,#ffe3cd);min-height: 100vh;display: flex;flex-flow: column ;align-items: center;}
.body-box{display: flex;flex-flow: column ;width: 100%;padding: 0 1.2em 2.2em 1.2em;}
h2{font-size: 1.2em;margin:2.5rem 0 1.25rem;text-align: center;}
ul.tab{display: flex;align-items: center;justify-content: space-between;}
ul.tab a{padding:.5em 4em;display: block;}
ul.tab li.on{position: relative;}
ul.tab li.on::before{content: '';position: absolute;height: 1px;width: 2.2em;background-color: #F65C11;bottom: 0;left: 0;right: 0;margin: auto;}

.form{background-color: #fff;  margin: 1em 0; border-radius: .8em; padding: 1em;box-shadow: 0 0 .3em 0 rgba(0,0,0,.25) ;width: 100%;font-size: .96em;}
.form i.icon{font-weight: 700;margin-right: .2em;}
.form p{display: flex;align-items: center;padding: .4em;}
.form >div{position: relative;display: flex;flex-flow: column; }
.form input{border-radius: .8em;border: 0;background-color: #f6f6f6;padding: .4em .8em; margin: .4em;font: inherit;font-size: .86em;}
.form .tips{position: absolute;top: 0;right: 0;bottom: 0;margin: auto;height: 1em;font-size: 0.8em;padding: 0 1.5em;color: #00B6B9;}
.form .c-btn-l{margin: 1.25rem 0 2.5rem;}
.form>div>a{font-size: .8em;text-align: right;padding:0.625rem;color: #aaa;}

.popup-agree{display: flex;flex-flow: column;align-items: center;}
.popup-agree .logo{width: 4rem;height: 4rem; margin: 0.2rem;}
.popup-agree h3{text-align: center;line-height: 1.2em;margin:  1em;}
.popup-agree p{font-size: .84em;line-height: 1.6em;}
.btns {display: flex;width: 100%;justify-content: space-around;margin:  0.625rem;}
.btns .c-btn-m{flex: 1; margin: 0 0.625rem;}