body{background: #f1f1f1}
.user-header{background: #FF3A3A; height: 80px;}
.user-logo{float: left; height: 60px; margin-top: 10px}
.user-logo img{height: 60px;}
.user-top-menu{float: right; width:1000px;}
.user-top-menu .leftMenu{float: left; font-size: 30px; color: #fff; margin-top: 20px}
.user-top-menu .leftMenu span{ margin-left: 20px; border-left: 1px #fff solid; padding-left: 20px; font-size: 14px}
.user-top-menu .leftMenu span a{color: #fff}
.user-top-menu .rightMenu{float: right;}
.user-top-menu .rightMenu a{border-radius: 15px; height:30px; line-height:30px; border:1px #fff solid; display: block;padding: 0 20px; color: #fff; margin-top: 25px}

.user-box{width: 1200px; margin: auto; margin-top:20px; clear: both; overflow: hidden; }
.leftBox{float: left; width: 200px;}
.rightBox{float: right; width: 980px;}
.user-menu{clear: both; overflow: hidden;}
.user-menu a{line-height: 40px; border-bottom: 1px #f1f1f1 solid; display: block; padding-left: 20px}
.user-menu a:last-child{border: 0}
.user-menu a.active{color: #FF3A3A}
.my-card-header{font-size: 16px;}
.my-card-header i{color:#FF3A3A;}

.my-btn{background: #FF3A3A;} 

.user-face{float: left; width: 180px; text-align: center; overflow: hidden; margin-right: 20px}
.user-face img{width: 150px; height: 150px; margin-bottom: 10px;}
.user-info{ float: left;}
.user-info li{ height: 30px; line-height: 30px; font-size: 14px;}
.user-info li label{color: #999; width: 100px; display: block; float: left;}
.user-info li span{font-weight: bold; padding: 0 5px}

.empty{text-align: center; color: #999; font-size: 20px;}
.empty img{width: 150px;margin: auto;}

.my-card{border: 1px #f1f1f1 solid}
.my-card .layui-card-header{font-size: 12px; background: #f1f1f1}

.helpLeft{float: left; width: 200px; background: #fff}
.helpLeft .hd{height: 50px; background: #FF3A3A; color: #fff; text-align: center; font-size: 20px; line-height: 50px;}
.helpLeft .hd i{font-size: 20px}
.helpRight{float: right; width: 980px;}

.helpMenu{clear: both;}
.helpMenu a{display: block; padding-left:20px; line-height: 30px; border-bottom: 1px #f1f1f1 solid;color: #777}
.helpMenu a:last-child{border: 0}
.my-colla-title{background-color: #fff; font-weight: bold;}

.jindu{clear: both; padding: 10px; border-bottom-right-radius: 10px;}
.jindu .hd{clear: both; overflow: hidden; margin: 0 -10px; margin-bottom: -20px;}
.jindu .hd .arrowBox{float: left; z-index: 99; position: relative;}
.jindu .hd .arrowBox .jifen{font-size: 12px; height: 20px; line-height: 20px; color: #fff; border-radius: 8px; background: #F0454C; padding: 0 5px;}
.jindu .hd .arrowBox .jifenArr{width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 4px solid #F0454C; margin-left:10px }
.jindu .fd{font-size: 14px; clear: both; margin-top: 10px;}
.jindu .fd span{padding-left: 15px;}
.jindu .bd{clear: both; position: relative; width:100%; height: 50px; overflow: hidden; margin: auto}
.jindu .line{background: #ccc; height:4px; font-size: 0; width: 100%; left: 0; top: 24px; position: absolute}
.jindu .line span{display: block; background: #F0454C; width: 50%; height: 4px;}
.jindu .number{font-size: 12px;position: absolute; left: 0; top:0px; width: 100%;}
.jindu .number li{float: left; width: 25%;}
.jindu .per{font-size: 12px;position: absolute; left: 0; top:30px; width: 100%;}
.jindu .per li{float: left; width: 25%; text-align: center}
.jindu .dot{position: absolute; left: 0; top: 22px; width: 100%; height: 6px;}
.jindu .dot li{float: left; width: 25%;}
.jindu .dot li span{display: block; float: left; width:8px; height:8px; border-radius: 4px; background: #000;}

.sn{float: left; width:200px; margin-right: 20px; cursor: pointer;}

.tabMenu{clear: both; overflow: hidden; margin-bottom: 10px;}
.tabMenu li{float: left; margin-right: 10px;}
.tabMenu li a{display: block; padding: 5px 10px; background: #f7f7f7}
.tabMenu li.active a{background: #FF3A3A; color: #fff}

.orderBox{clear: both; border:1px #f1f1f1 solid; overflow: hidden; margin-bottom: 10px}
.orderBox *{font-size: 12px}
.orderBox a:hover{ color: #FF3A3A}
.orderBox .hd{clear: both; line-height: 40px; padding: 0 10px; background: #f1f1f1; overflow: hidden;}
.orderBox .bd{clear: both; display: flex;} 
.orderBox .bd .item{ padding: 10px; flex: 1; border-right: 1px #f1f1f1 solid}
.orderBox .bd .price{ padding: 10px; width: 70px; text-align: center; border-right: 1px #f1f1f1 solid}
.orderBox .bd .action{ padding: 10px; width:80px; text-align: right;}
.goodsDetail{clear: both; overflow: hidden;}
.goodsDetail li{float: left; margin-right: 10px; line-height: 20px}
.goodsDetail li img{height: 50px; display: block; width: 50px}
.goodsDetail li p{color: #999}
.delIcon{cursor: pointer; float: right; width: 40px; text-align: center;}
.delIcon i{font-size: 20px;}
.orderCut{float: left; padding-right: 10px}

.list{clear: both;}
.list li{border-bottom:1px #f1f1f1 solid; clear: both; padding: 5px; overflow: hidden;}
.list li label{float:left;}
.list li p{float:right;}
.list li p.money{color: #f00}
.list li p.personImg img{display: inline-block; height: 50px;}
.product{box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); background: #f7f7f7; clear: both; overflow: hidden;transition: 0.3s;}
.product .img{clear: both; overflow: hidden;}
.product img{display: block; width: 100%}
.product .name{font-size:16px; padding: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical; height: 40px}
.product .price{font-size:16px; text-align: center; padding: 10px; float: left;}
.product .addBtn{ float: right; padding-right: 10px; padding-top: 10px}


.actionBox{clear: both; overflow: hidden;}
.actionBox .actionLeft{float: left;}
.actionBox .actionLeft span{line-height: 44px; padding-right: 20px; cursor: pointer;}
.actionBox .actionRight{float: right; text-align: right;}
.numberAction{clear: both; text-align: center; margin:5px 0;}
.numberAction span{display: inline-block; line-height: 20px;padding: 0 5px}
.numberAction span.set{height:20px; width: 20px; border:1px #ccc solid; border-radius: 50%; text-align: center; padding: 0; background: #f1f1f1; cursor: pointer;}
.numberAction span.set:hover{background:#FF3A3A;color: #fff;border:1px #FF3A3A solid; }
.radio{width: 12px; height: 12px; margin: auto; border-radius: 50%; border:1px #ccc solid; cursor: pointer;}
.radio.active{background:#FF3A3A; border-color: #FF3A3A}

.bagBox{clear: both; background: #fff; overflow: hidden; margin-top: 5px}
.bagBox *{font-size: 12px;}
.bagBox .line{background: url(../image/line.jpg); height: 4px; clear: both;}
.bagBox .hd{line-height: 30px; clear: both; padding: 0 10px; overflow: hidden;}
.bagBox .hd p{float: left; font-weight: bold; margin-right: 5px}
.bagBox .hd i{display: block; float: left; background: #FF3A3A; width:16px; height:16px; border-radius: 50%; text-align: center; line-height:16px; color: #fff; font-size: 12px; font-style: normal; margin-top:7px; margin-right: 5px;}
.bagBox .hd .tag{border-radius:9px; border-bottom-left-radius: 0; line-height: 16px; border:1px #EA830E solid; padding: 0 5px; float: left; font-size: 12px; margin-top: 7px; color: #EA830E}
.bagBox .hd .tag1{color: #FF3A3A; border-color: #FF3A3A}
.bagBox .hd span{float: right; color:#FF3A3A;}
.bag{clear: both; overflow: hidden;}
.bag li{clear: both; overflow: hidden; color: #666; padding:5px 10px}
.bag li .goodsName{ float: left; width: 80%}
.bag li .right{ float: right;}
.bagBox .fd{text-align: right; line-height: 30px; padding-right: 10px; color:#999999;}
.bagBox .fd span{color: #000; padding-left: 10px;}
.bagBox .img{clear: both; overflow: hidden; text-align: right;}
.bagBox .img img{height: 100px;}
.cutBox{float: right; padding-top: 12px;}

.bankcardInfo{float: right; background-color: #f7f7f7; margin-right: 30px; width:400px; padding-bottom:20px; border: 1px #dbdbdb solid; border-radius:5px}

.bigClient{float: right; background-color: #f1f1f1; padding:7px 5px;}
.bigClient img{display: block; float: left;}
.bigClient p{float: left; line-height: 32px;}