body { margin: 0; padding: 0; background: #fff; }
.none { display: none; }

p,
input
{ font-size: 0.95em; }

/* 导航栏 */
#backbar {width: 100%;overflow: hidden;height:48px;line-height:48px;box-sizing: border-box;background: #f2f2f2;}
#backbar img {height: 100%;float: left;padding: 14px; background: #f2f2f2; box-sizing:border-box;}


#backbarA {width: 100%;overflow: hidden;height:48px;box-sizing: border-box;background: #80D248;}
#backbarA img {height: 100%;float: left;padding: 14px; background: #80D248; box-sizing:border-box;}

/* 输入框
格式: 
    div > p input
*/
/*.input { overflow:hidden;  width:100%; vertical-align:middle; position: relative; }
.input p { position: absolute; top: 0; bottom: 0px; left: 0; right: 0; margin: 0 20px; padding: 12px 0; text-align: left; pointer-events: none; display: inline-block; border-bottom: 1px solid #ddd; }
.input input[type="text"] { display: inline-block; width: 100%; padding: 14px 10px; outline: none; padding-left: 95px; border: none; color:#333; }
.input input[type="tel"] { display: inline-block; width: 100%; padding: 14px 10px; outline: none; padding-left: 95px; border: none; color:#333; }
.input input[type="number"] { display: inline-block; width: 100%; padding: 14px 10px; outline: none; padding-left: 95px; border: none; color:#333; }*/

/*.input { text-align: left; overflow: hidden; background: #fff; position: relative; line-height: 42px; }
.input::before { content:''; display: inline-block; height: 1px; left: 20px; right: 20px; background: #ddd; position: absolute; bottom: 0; z-index: 1; }
.input p { display:inline-block; width: 90px; box-sizing: border-box; padding-left: 20px; float: left; margin: 0; }
.input input[type="text"], .input input[type="tel"], .input input[type="number"] { margin: 0; border: none; padding: 0; width: 70%; outline: none; background: #fff;}*/ 

.input { text-align: left; /*background: #fff;*/ background: none; line-height: 42px; overflow: hidden; /*width: 90%;*/ vertical-align: middle; position: relative; margin: 0 auto; }
.input::before { content:''; display: inline-block; height: 1px; left: 20px; right: 20px; background: #ddd; position: absolute; bottom: 0; z-index: 1; }
.input p { width: 90px; box-sizing: border-box; padding-left: 20px; float: left; position: absolute; top: 0; bottom: 0px; left: 0; right: 0; margin: -12px 20px; padding: 15px 0; text-align: left; pointer-events: none; display: inline-block; border-bottom: 1px solid #ddd; }
.input input[type="text"], .input input[type="tel"], .input input[type="number"] { margin: 0; display: inline-block; width: 100%; padding: 17px 10px; outline: none; padding-left: 95px; border: none; color: #808080; }
.input>span { padding-left: 95px; }
.input > select {    left:95px;    }


/* 按钮
格式: 
    li > button
    给 li 加 btnli
    给 button 加 btn
 */
.btnli {padding: 0 20px;}
.btn { width: 100%; border-radius: 100px; color: #fff; border: none; font-size: 0.95em; height: 48px; position: relative; }
.btn-defalut {  background: linear-gradient(#2196F3, #2196F3);  }/*background: #2196F3;*/
.btn-green {  background: linear-gradient(#80D248, #80D248);}/*1dce6c  background: #80D248; */
.btn-red {  background: linear-gradient(#d54932, #d54932);}/*background: #d54932; */
.btn-orange { background: linear-gradient(orange, orange);}/* background: orange; */

/* 列表
格式: li > 
        span > p 
        span > p
 */
.ul li{ background: #fff; overflow: hidden; padding: 0 15px; }
.ul div { padding: 12px 0px; padding-bottom: 10px; border-bottom: 1px solid #ddd; overflow: hidden; }
.ul span { display:inline-block;}
.ul span:nth-child(1) { float: left; font-size: 0.95em; }
.ul span:nth-child(2) { float: right; }
.ul p { margin: 0; }


/* 
返回按钮
格式 
<span class="back">返回</span>
 */
/*.back {text-indent: 3px;font-size: 12px; display: inline-block; height: 30px; line-height: 30px; width: 40px; background: #0db8f6; border-radius: 4px; color: #fff; position: relative; text-align: left; margin-left: 25px; padding-left: 4px; float: left; margin-top:10px;}
.back::after { content: ''; display: inline-block; float: left; border-top: 11px solid #0db8f6; border-left: 11px solid #0db8f6; border-bottom: 11px solid rgba(0,0,0,0); border-right: 11px solid rgba(0,0,0,0); transform: rotate(-45deg); position: absolute; left: -9px; top: 4px; border-radius: 4px; }
    */
.back {font-size: 12px;display: inline-block; height: 25px;line-height: 25px;width: 30px;background: #0db8f6;border-radius: 4px; color: #fff;position: relative;text-align: left; margin-left: 25px; padding-left: 4px; float: left; margin-top: 11px; box-sizing: unset;}
.back::after { content: ''; display: inline-block; float: left; border-top: 8px solid #0db8f6;border-left: 8px solid #0db8f6; border-bottom: 11px solid rgba(0,0,0,0); border-right: 11px solid rgba(0,0,0,0);transform: rotate(-45deg); position: absolute;left: -7px;top: 3px; border-radius: 4px;}
.back:hover {color:red;}

.backA {font-size: 12px;display: inline-block; height: 25px;line-height: 25px;width: 30px;background: #80D248;border-radius: 4px; color: #fff;position: relative;text-align: left; margin-left: 25px; padding-left: 4px; float: left; margin-top: 11px; box-sizing: unset;}
.backA::after { content: ''; display: inline-block; float: left; border-top: 8px solid #80D248;border-left: 8px solid #80D248; border-bottom: 11px solid rgba(0,0,0,0); border-right: 11px solid rgba(0,0,0,0);transform: rotate(-45deg); position: absolute;left: -7px;top: 3px; border-radius: 4px;}

.backB {font-size: 12px;display: inline-block; height: 25px;line-height: 25px;width: 30px;background: #d54932;border-radius: 4px; color: #fff;position: relative;text-align: left; margin-left: 25px; padding-left: 4px; float: left; margin-top: 11px; box-sizing: unset;}
.backB::after { content: ''; display: inline-block; float: left; border-top: 8px solid #d54932;border-left: 8px solid #d54932; border-bottom: 11px solid rgba(0,0,0,0); border-right: 11px solid rgba(0,0,0,0);transform: rotate(-45deg); position: absolute;left: -7px;top: 3px; border-radius: 4px;}