.page{
    max-width: 76.8rem;
    margin: 0 auto;
}
.page .title{
    line-height: 4.5rem;
    text-align: center;
    background: #198df9;
    position: relative;
}
.page .title h1{
    font-size: 1.6rem;
    color: #fff;
}
/**
  * index
  */
.index{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
.index .choose-company{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0rem 1rem;
    line-height: 5rem;
    border-bottom: 0.5rem solid #f6f6f6;
}
.index .choose-company span{
    flex-grow: 2;
	font-size: 1.6rem;
}
.index .choose-company em{
    font-size: 1.8rem
}
.index .user-id{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 4rem;
    align-items:center;
    padding: 0.5rem 1rem;
    border-bottom: 0.1rem solid #f6f6f6;
}
.index .user-id-last{
    border-bottom: 0.5rem solid #f6f6f6;
}
.index .user-id span{
    width: 10rem
}
.index .user-id input{
    line-height: 4rem;
    height: 4rem;
    border-radius: 0.5rem;
    padding-left: 0.5rem;
    border:0.1rem solid #e2e2e2
}
.index .quick-pay{
    padding: 1rem;
}
.index .quick-pay .pay-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.1rem solid #e2e2e2;
}
.index .quick-pay .pay-box .avatar{
	width: 4rem;
    height: 4rem;
    margin-right: 1rem;
    border-radius: 50%;
	line-height:4rem;
    text-align: center;
	font-size:1.5rem;
    flex-shrink: 0;
    background: #198df9;
    color: #fff;
}
.index .quick-pay .pay-box .icon-yonghu{
    font-size: 3rem;
    color: #198df9;
    margin-right: 0.5rem;
}
.index .quick-pay .icon-yonghu{
    width: 3rem;
}
.index .quick-pay .user-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    flex-grow: 2;
	
}
.index .quick-pay .weui-icon-success{
    color: #09BB07;
}
.index .quick-pay .message{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 0.5rem;
}
.index .quick-pay .message strong{
    overflow: hidden;
    /* white-space: nowrap;
    text-overflow: ellipsis; */
    color: #a2a2a2;
    font-size: 1.3rem;
}
.index .quick-pay .message span{
    overflow: hidden;
    /* white-space: nowrap;
    text-overflow: ellipsis; */
    color: #a2a2a2;
    font-size: 1.3rem;
}
.index .quick-pay .handle{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
	align-items:center;
    width: 7rem;
    flex-shrink:0;
}
.index .quick-pay .handle i{
	vertical-align:middle
}
.index .quick-pay .handle span{
    color: #198df9;
}
.index button{
    background: #198df9;
    line-height: 4.5rem;
	font-size: 1.6rem;
    border: none;
    color: #fff;
    flex-grow: 2;
    border-radius: 0.5rem;
    box-sizing: border-box;
    margin: 1rem 1rem;
}
.index span#history_record{
	line-height:4.5rem;
	font-size: 1.4rem;
	display:block;
	text-align:right;
	padding-right:1rem;
	margin-bottom: 2rem;
	color:#198df9;
}
.dialog-page{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top:0;
    background: #fff;
    display: none;
}
.dialog-page .company-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.dialog-page .company-box h3{
    padding-left: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
	height: 5rem;
    border-bottom: 0.1rem solid #e2e2e2;
    line-height: 5rem;
}
.dialog-page .company-box h3 i{
    color: #198df9;
    font-weight: bold;;
    font-size: 2rem;
    margin-right: 1rem;
}
.dialog-page .company-box ul{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.dialog-page .company-box ul li{
    border-bottom: 0.1rem solid #e2e2e2;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 2rem;
    padding: 1.5rem 1rem;
}
/**
  * success
  */
.success{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.success-message{
    padding: 6rem 0;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.success-message i{
    font-size: 6rem;
    margin-bottom: 1rem
}
.success button{
    background: #198df9;
    line-height: 4.5rem;
	font-size:1.6rem;
    border: none;
    color: #fff;
    flex-grow: 2;
    border-radius: 0.5rem;
    box-sizing: border-box;
    margin: 2rem 1rem;
}
/**
  * error
  */
.error{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.error-msg{
    padding: 6rem 0;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.error-msg span{
	padding: 0rem 4rem;
	text-align:center;
	display: black;
	font-size:1.6rem;
}
.error button{
    background: #198df9;
    line-height: 4.5rem;
    border: none;
    color: #fff;
    flex-grow: 2;
    border-radius: 0.5rem;
    box-sizing: border-box;
    margin: 2rem 1rem;
}
/**
  * detail
  */
.detail{
    display: flex;
    flex-direction:column;
    justify-content: space-between;
}
.detail .detail-total{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
}
.detail .detail-total .total{
    color: red;
    font-size: 4rem;
    line-height: 4.5rem;
}
.detail .detail-total em{
    font-style: normal;
    color: red;
    font-size: 1.6rem;
}
.detail .detail-message{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 0.1rem solid #e2e2e2;
    padding-bottom: 2rem;
}
.detail .detail-message h3{
    line-height: 4.5rem;
    border-bottom: 0.1rem solid #e2e2e2;
    padding-left: 1rem;
    font-weight: bold;
}
.detail .detail-message ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2rem 1rem 0rem 1rem;
}
.detail .detail-message ul li{
    width: 33%;
    text-align: center;
}
.detail .payment{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-bottom: 0.1rem solid #e2e2e2;
    align-items: center;
}
.detail .payment span{
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-grow:2;
    align-items:center;
}
.detail .payment .icon-icon-wepay{
    font-size: 3rem;
    color: #09bb07;
    margin-right:1rem;
}
.detail .payment .icon-jianhangzhifu{
    font-size: 3rem;
    color: #1d20bb;
    margin-right:1rem;
}
.detail button{
    background: #198df9;
    line-height: 4.5rem;
    border: none;
    color: #fff;
    flex-grow: 2;
    border-radius: 0.5rem;
    box-sizing: border-box;
    margin: 2rem 1rem;
}
/**
  * explain
  */
.explain{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.explain .explain-message{
    padding: 0.5rem 0 3rem;
    border-bottom: 0.1rem solid #e2e2e2;
}
.explain .explain-message ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2rem 1rem 0rem 1rem;
}
.explain .explain-message ul li{
    width: 33%;
    text-align: center;
}
.explain .explain-message li strong{
    font-size: 1.6rem;
    font-weight: bold;
}
.explain .remark{
    color: red;
    padding-left: 1rem;
    line-height: 4rem;
}
/**
  * hall
  */
.hall{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hall .hall-list{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hall .hall-list h3{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-left: 1rem;
    align-items:center;
    padding: 0.8rem 0.5rem;
    border-bottom: 0.1rem solid #e2e2e2;
}
.hall .hall-list h3 i{
    margin-right: 1rem;
    color: #198df9;
    font-weight: bold;
    font-size: 1.6rem;
}
.hall .list-box{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 1.2rem;
    margin: 1.2rem 1rem 0;
    border-bottom: 0.1rem solid #e2e2e2;
}
.hall .list-box span,.hall .list-box p{
    color: #a2a2a2;
    font-size: 1.3rem;
    line-height: 2rem;
}
.hall .list-box p label{
    color: #253034;
    font-size: 1.4rem;
}
/**
  * meter
  */
.meter{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.meter .user-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1rem;
    border-bottom: 0.1rem solid #e2e2e2;
}
.meter .user-box a{
    color: #198df9;
}
.meter .user-message{
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.meter .user-message span{
    color: #a2a2a2;
}
.meter .meter-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 0.5rem solid #f6f6f6;
}
.meter .meter-box .meter-list{
    display: flex;
    justify-content:  space-between;
    align-items: center;
    width:100%;
}

.meter .meter-box .meter-list .list-left{
	flex-grow:2
}
.meter .amount-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.meter .amount-box .choose-amount h3{
    padding-left: 1rem;
    line-height: 4.5rem;
}
.meter .amount-box .choose-amount ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.meter .amount-box .choose-amount ul li{
    width: 23%;
    margin: 1rem 5%;
    text-align: center;
    padding: 0.5rem 0rem;
    border: 0.1rem solid #198df9;
    color: #198df9;
    border-radius: 0.5rem;
    box-sizing: border-box;
}
.meter .amount-box .choose-amount ul li.hover{
    background:#198df9;
    color: #fff;
}
.meter .other-amount{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1.5rem 1rem;
    border-bottom: 0.1rem solid #e2e2e2;
}
.meter .other-amount label{
    width: 13rem;
    line-height: 3rem;
}
.meter .other-amount input{
    flex-grow: 2;
    border:0.1rem solid #e2e2e2;
    border-radius: 0.5rem;
    height: 3rem;
    line-height: 3rem;
    padding-left: 1rem;
    box-sizing: border-box;
}
.meter .payment{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-bottom: 0.1rem solid #e2e2e2;
    border-top: 0.1rem solid #e2e2e2;
    align-items: center;
}
.meter .payment span{
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-grow:2;
    align-items:center;
}
.meter .payment .icon-icon-wepay{
    font-size: 3rem;
    color: #09bb07;
    margin-right:1rem;
}
.meter .payment .icon-jianhangzhifu{
    font-size: 3rem;
    color: #1d20bb;
    margin-right:1rem;
}
.meter button{
    background: #198df9;
    line-height: 4.5rem;
    border: none;
    color: #fff;
    flex-grow: 2;
    border-radius: 0.5rem;
    box-sizing: border-box;
    margin: 2rem 1rem;
}
/**
  * ic-card
  */
.ic-card{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ic-card .user-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1rem;
    border-bottom: 0.5rem solid #f6f6f6;
}
.ic-card .user-message{
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.ic-card .user-message span,.ic-card .meter-box span{
    color: #a2a2a2;
}
.ic-card .card-box{
    border-bottom: 0.5rem solid #f6f6f6;
}
.ic-card .card-box a{
    color: #198df9;
}
.ic-card .card-list{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem;
    line-height: 2rem;
    align-items:center;
    border-bottom: 0.1rem solid #f6f6f6;
}
.ic-card .card-box .card-box-left{
	flex-grow:2;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.ic-card .card-box .card-box-left em{
	font-style:normal;
}
.ic-card .amount-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.ic-card .amount-box .choose-amount h3{
    padding-left: 1rem;
	font-size:1.4rem;
    line-height: 4.5rem;
}
.ic-card .amount-box .choose-amount ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
	padding: 0rem 3%;
}
.ic-card .amount-box .choose-amount ul li{
    width: 30%;
    margin: 1rem 0%;
    text-align: center;
    padding: 0.7rem 0rem;
    border: 0.1rem solid #198df9;
    color: #198df9;
    border-radius: 0.5rem;
    box-sizing: border-box;
}
.ic-card .amount-box .choose-amount ul li.hover{
    background:#198df9;
    color: #fff;
}
.ic-card .other-amount{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1.5rem 1rem;
	align-items:center;
    border-bottom: 0.1rem solid #e2e2e2;
}
.ic-card .other-amount label{
    width: 15rem;
    line-height: 3rem;
}
.ic-card .other-amount input{
    flex-grow: 2;
    border:0.1rem solid #e2e2e2;
    border-radius: 0.5rem;
    height: 4rem;
    line-height: 4rem;
    padding-left: 1rem;
    box-sizing: border-box;
}
.ic-card .payment{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding:0.5rem 1rem;
    border-bottom: 0.1rem solid #e2e2e2;
    align-items: center;
}
.ic-card .payment span{
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-grow:2;
    align-items:center;
}
.ic-card .payment .icon-icon-wepay{
    font-size: 3.5rem;
    color: #09bb07;
    margin-right:1rem;
}
.ic-card button{
    background: #198df9;
    line-height: 4.5rem;
    border: none;
    color: #fff;
	font-size:1.6rem;
    flex-grow: 2;
    border-radius: 0.5rem;
    box-sizing: border-box;
    margin: 2rem 1rem;
}
/**
  * account
  */
.account{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.account .user-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1rem;
    border-bottom: 0.1rem solid #e2e2e2;
}

.account .user-btn{
    display:flex;
    flex-direction: column;
    min-width: 80px;
    flex-shrink:0;
}
.account .user-box  a{
	color:#198df9;
}
.account .user-message{
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.account .user-message strong{
	
}
.account .user-box a{
    color: #198df9;
}
.account .user-message span{
    color: #a2a2a2;
}
.account .account-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.account .ladder{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 0.1rem solid #e2e2e2;
}
.account .price{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 0.5rem solid #f6f6f6;
}
.account .price em{
    font-style: normal;
    color: red;
}
.account .amount-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.account .amount-box .choose-amount h3{
    padding-left: 1rem;
	font-size:1.4rem;
    line-height: 4.5rem;
}
.account .amount-box .choose-amount ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
	padding: 0rem 3%;
}
.account .amount-box .choose-amount ul li{
    width: 30%;
    margin: 1rem 0%;
    text-align: center;
    padding: 0.7rem 0rem;
    border: 0.1rem solid #198df9;
    color: #198df9;
    border-radius: 0.5rem;
    box-sizing: border-box;
}
.account .amount-box .choose-amount ul li.hover{
    background:#198df9;
    color: #fff;
}
.account .other-amount{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1.5rem 1rem;
    border-bottom: 0.1rem solid #e2e2e2;
	align-items: center;
}
.account .other-amount label{
    width: 14rem;
    line-height: 3rem;
}
.account .other-amount input{
    flex-grow: 2;
    border:0.1rem solid #e2e2e2;
    border-radius: 0.5rem;
    height: 3rem;
    line-height: 4rem;
	height:4rem;
    padding-left: 1rem;
    box-sizing: border-box;
}
.account .payment{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding:0.3rem 1rem;
    border-bottom: 0.1rem solid #e2e2e2;
    align-items: center;
}
.account .payment span{
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-grow:2;
    align-items:center;
}
.account .payment .icon-icon-wepay{
    font-size: 3rem;
    color: #09bb07;
    margin-right:1rem;
}
.account .payment .icon-jianhangzhifu{
    font-size: 3rem;
    color: #1d20bb;
    margin-right:1rem;
}
.account button{
    background: #198df9;
    line-height: 4.5rem;
	font-size:1.6rem;
    border: none;
    color: #fff;
    flex-grow: 2;
    border-radius: 0.5rem;
    box-sizing: border-box;
    margin: 2rem 1rem;
}
/**
  * bill
  */
.bill-detail{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bill-detail .user-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1rem;
    border-bottom: 0.1rem solid #e2e2e2;
}
.bill-detail .user-message{
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.bill-detail .user-box a{
    color: #198df9;
}
.bill-detail .user-message span{
    color: #a2a2a2;
}
.bill-detail .bill-detail-total{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 0.5rem solid #e2e2e2;
}
.bill-detail .bill-detail-total .total-list{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 2rem;
}
.bill-detail .bill-detail-total .total-list label,.bill-detail .bill-detail-total .total-list span{
    color: #a2a2a2;
}
.bill-detail .bill-detail-total .total-list:first-child label{
    font-weight: bold;
    line-height: 3rem;
    font-size: 1.6rem;
    color: #253034;
}
.bill-detail .bill-detail-total .total-list:first-child span{
    color: red;
    font-size: 1.6rem;
}
.bill-detail .bill-detail-message ul{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    line-height: 2.4rem;
    border-bottom: 0.1rem solid #e2e2e2;
}
.bill-detail .bill-detail-message ul li{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
	line-height:3rem;
}
.bill-detail .bill-detail-message ul li label{
    width: 7.2rem;
    text-align: right;
}
.bill-detail .bill-detail-message ul li span{
    color: #a2a2a2;
}
.bill-detail .payment{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding:0.5rem 1rem;
    border-bottom: 0.1rem solid #e2e2e2;
    align-items: center;
}
.bill-detail .payment span{
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-grow:2;
    align-items:center;
}
.bill-detail .payment .icon-icon-wepay{
    font-size: 3rem;
    color: #09bb07;
    margin-right:1rem;
}
.bill-detail .payment .icon-jianhangzhifu{
    font-size: 3rem;
    color: #1d20bb;
    margin-right:1rem;
}
.bill-detail button{
    background: #198df9;
    line-height: 4.5rem;
    border: none;
    color: #fff;
	font-size:1.6rem;
    flex-grow: 2;
    border-radius: 0.5rem;
    box-sizing: border-box;
    margin: 2rem 1rem;
}
/**
  * bill
  */
.bill {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bill .bill-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #fff;
    border-bottom: 0.1rem solid #e2e2e2;
}
.bill .bill-box .bill-message{
    flex-grow: 2;
    line-height: 2.5rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
}

.bill .bill-box a{
    color:#198df9;
}
.bill .bill-box .bill-message i{
    float: left;
    font-size: 3rem;
    color: #198df9;
    margin-right: 1rem;
}
.bill .bill-box .bill-message strong{
    display: block;
    font-size: 1.4rem;
}
.bill .bill-tab{
    line-height: 5rem;
}
.bill .bill-tab em{
    vertical-align: middle;
}
.bill .bill-list{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 0.1rem solid #e2e2e2;
}
.bill .bill-list .list-message{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
	align-items: center;
    flex-grow: 2;
}
.bill .bill-list .time{
    padding: 0.5rem 1rem;
    background: #198df9;
    border-radius: 0.3rem;
    margin-right: 1rem;
    color: #fff;
}
.bill .bill-list .time em{
    color: #fff;
    font-style: normal;
}
.bill .bill-list .time em.year{
	display:block
}
.bill .bill-list .bill-message{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.bill .bill-list .bill-statue{
    line-height: 5rem;
}
.bill .bill-list .bill-statue span.not{
    color: #ff0000;
}
.bill .bill-list .bill-statue em{
    vertical-align: middle;
}
/**
  * pay-record
  */
.pay-record .record-message{
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem ;
    align-items: center;
}
.pay-record .record-message .message-user{
    flex-grow: 2;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    line-height: 2rem;
    align-items: center;
    margin-right: 1rem;
}
.pay-record .record-message .message-user .header-icon{
    width: 5rem;
    height: 5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    text-align: center;
	font-size:1.6rem;
    line-height: 5rem;
    flex-shrink: 0;
    background: #198df9;
    color: #fff;
}
.pay-record .record-message .user-tab{
    line-height: 3rem;
    flex-shrink: 0;
}
.pay-record .record-message span{
    display: block;
}
.pay-record .start-time,.pay-record .end-time{
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0rem 1rem;
    line-height: 4.5rem;
    border-top: 0.1rem solid #e2e2e2;
	align-items:center;
}
.pay-record .start-time input[type="date"],.pay-record .end-time input[type="date"]{
    height: 4.5rem;
    line-height: 4.5rem;
	vertical-align:middle;
}
.pay-record .record-list .list-box{
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 0.5rem;
    border-top: 1rem solid #f6f6f6;
}
.pay-record .record-list .list-head{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 4.5rem;
    border-bottom: 0.1rem solid #e2e2e2;
    padding: 0rem 1rem;
}
.pay-record .record-list .list-head h5{
	font-size:1.4rem;
}
.pay-record .record-list .list-head span{
    color: #fa9614;
}
.pay-record .record-list .list-content{
    line-height: 2.4rem;
    padding: 1rem 0rem 0rem 1rem;
    color: #9b9b9b;
}
.pay-record .record-list .list-content babel{
    color: #000;
}
.pay-record .record-list .list-footer{
    text-align: right;
    line-height: 3rem;
    padding-right: 1rem;
}
/**
  * record-detail
  */
.record-detail{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 0.5rem;
}
.record-detail .detail-message{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.record-detail .detail-message h5{
    display: flex;
    flex-direction: row;
    justify-content: center;
	font-size:1.4rem;
    align-items: center;
}
.record-detail .detail-message .amount{
    font-size: 2rem;
    font-weight: bold;
    line-height: 3rem;
}
.record-detail .detail-message h5 span{
    width: 5rem;
    height: 5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
	line-height:5rem;
    text-align: center;
	font-size:1.6rem;
    flex-shrink: 0;
    background: #198df9;
    color: #fff;
}
.record-detail .detail-message img{
    vertical-align: middle;
    margin-right: 1rem;
}
.record-detail .detail-message li span{
    font-size: 2rem;
    line-height: 3rem;
    margin-top: 1rem;
    font-weight: bold;
    color: #000;
}
.record-detail .detail-message em{
    color: #9b9b9b;
    font-style: normal;
}
.record-detail ul{
    border-bottom: 0.1rem solid #e2e2e2;
}
.record-detail ul:last-child{
    border-bottom: none;
}
.record-detail ul li{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 3rem;
    color: #9b9b9b;
}
.record-detail ul li span:first-child{
	flex-shrink:0;
	margin-right:1rem;
}
.record-detail ul li span:last-child{
	text-align:right;
}
.record-detail ol li{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 3rem;
    color: #9b9b9b;
}
.record-detail ol li span{
	margin-right:1rem;
	text-align:right;
}
.record-detail ol li span:first-child{
	flex-shrink:0;
}
/**
  * page-ladder
  */
.page-ladder{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.page-ladder .ladder-message{
    padding: 1rem;
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #e2e2e2;
    position: relative;
}
.page-ladder .ladder-message .message-left{
    flex-grow: 2;
    line-height: 2.5rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.page-ladder .ladder-message .message-right{
    line-height: 5rem;
    flex-shrink: 0;
}
.page-ladder .ladder-message  span.character{
    width: 3rem;
    height: 3rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    text-align: center;
    line-height: 3rem;
    flex-shrink: 0;
    background: #198df9;
    color: #fff;
}
.page-ladder .ladder-message .character-box{
	display:flex;
	flex-direction:column;
	justyle-content:flex-start;
}
.page-ladder .ladder-message .character-box span{
	color:#a2a2a2;
}
.page-ladder .ladder-title{
    background: #fff;
}
.page-ladder .ladder-title span{
    padding-left: 1rem;
    display: block;
    line-height: 3rem;
}
.page-ladder button{
    background: #198df9;
    line-height: 4.5rem;
    border: none;
    color: #fff;
    flex-grow: 2;
    border-radius: 0.5rem;
    box-sizing: border-box;
    margin: 2rem 1rem;
}
.page-ladder p{
	margin: 0rem 1rem;
    line-height: 4.5rem;
    color:red;
}

.page-ladder .gas-chart-box{
    height: 255px;
    width: 94%;
    border-radius: 0.6rem;
    margin: 1.2rem;
    background: linear-gradient(to bottom, rgba(102, 214, 252, 0.719) 0%, rgba(26, 195, 251, 1) 100%);
}

.page-ladder .gas-chart-box .gas-chart{
    height: 255px;
}

.page-ladder .ladder-info-box{
    padding: 1rem;
    font-size:1.3rem;
    border-bottom: 0.1rem solid #e2e2e2;
}

.page-ladder  h3{
    padding: 1rem;
    padding-bottom: 0px;
    font-size: 1.6rem;
}

.page-ladder .ladder-info-box :nth-child(2){
    color:#FFB800;
    margin-left:0.5rem;
}

.page-ladder .ladder-box{
    width: 94%;
    height: 160px;
    margin: 1.2rem;
    border-radius: 0.6rem;
    padding: 1.2rem 0rem;
    background: linear-gradient(to bottom, rgba(255, 223, 181, 1) 0%, rgba(255, 191, 115, 1) 100%);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 1.4rem;
}
.page-ladder .ladder-box .ladder-item{
    margin: 0px 1.2rem;
    display: flex;
    text-align: center;
    flex-direction: column;
    flex-grow: 2;
}

.page-ladder .ladder-box .ladder-b{
    background: rgba(255, 255, 255, 1);
    color: rgba(240, 170, 80, 1);
    border-radius: 0.4rem;
}

.page-ladder .ladder-box .ladder-b-active{
    background: rgba(255, 144, 0, 1);
    color: #fff;
}

.page-ladder .ladder-box .ladder-text{
    color: #fff;
    font-size: 1.3rem;
    margin-top: 0.5rem;
}

.page-ladder .ladder-box :nth-child(1) .ladder-b{
    height: 4rem;
    line-height: 4rem;
}

.page-ladder .ladder-box :nth-child(2) .ladder-b{
    height: 6rem;
    line-height: 6rem;
}

.page-ladder .ladder-box :nth-child(3) .ladder-b{
    height: 8rem;
    line-height: 8rem;
}

.page-ladder .ladder-box .ladder-item img{
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 45%;
}


/**
  * page-contrast
  */
.page-contrast {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.page-contrast .contrast-message{
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 0.1rem solid #e2e2e2;
}
.page-contrast .contrast-message .message-left{
    flex-grow: 2;
    line-height: 2.5rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.page-contrast .contrast-message  span.character{
    width: 3rem;
    height: 3rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    text-align: center;
    line-height: 3rem;
    flex-shrink: 0;
    background: #198df9;
    color: #fff;
}
.page-contrast .contrast-message .message-left strong{
    font-size: 1.4rem;
    display: block;
}
.page-contrast .contrast-message .message-right{
    line-height: 5rem;
    flex-shrink: 0;
}
.page-contrast .contrast-message img{
    float: left;
    margin-right: 1rem;
}
.page-contrast button{
    background: #198df9;
    line-height: 4.5rem;
    border: none;
    color: #fff;
    flex-grow: 2;
    border-radius: 0.5rem;
    box-sizing: border-box;
    margin: 2rem 1rem;
}

/**
    meter
 */
.meter .amount-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.meter .amount-box .choose-amount h3{
    padding-left: 1rem;
    font-size:1.4rem;
    line-height: 4.5rem;
}
.meter .other-amount{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1.5rem 1rem;
    /*border-bottom: 0.1rem solid #e2e2e2;*/
    align-items: center;
}
.meter .other-amount label{
    width: 14rem;
    line-height: 3rem;
}
.meter .other-amount input{
    flex-grow: 2;
    border:0.1rem solid #e2e2e2;
    border-radius: 0.5rem;
    height: 3rem;
    line-height: 4rem;
    height:4rem;
    padding-left: 1rem;
    box-sizing: border-box;
}
.meter button{
    background: #198df9;
    line-height: 4.5rem;
    font-size:1.6rem;
    border: none;
    color: #fff;
    flex-grow: 2;
    border-radius: 0.5rem;
    box-sizing: border-box;
    margin: 2rem 1rem;
}