body{padding:0;margin: 0 auto !important;max-width: 800px;width: 100%;background-color: #f7f7f7;}
header{width: 100%;height: 60px;border-bottom: 1px solid #e5e5e5;background-color: #ffffff;}
header img{height: 40px;margin-top: 10px;margin-left: 10px;}
.content{width: calc(100% - 20px);padding:0 10px;}

footer{position: fixed;bottom: 0;left: 0;width: 100%;height: 40px;background-color: #ffffff;border-top: 1px solid #e5e5e5;padding: 10px 0;display: flex;flex-direction: row;}
footer .f1{width: 50%;display: flex;align-items: center;justify-content: center;flex-direction: column;color: #8a8a8a;}
footer .f1 img{height: 20px;margin-bottom: 4px;}
footer .active{color: #5d469e;}

/* index page */
.goodslist{display: flex;flex-wrap: wrap;align-content: center;justify-content: space-between;align-items: center;}
.goodsbox{width: calc(50% - 10px);margin-top: 10px;border: 1px solid #f5f5f5;border-radius: 5px;background-color: #ffffff;}
.goodsbox img{width: 100%;}
.goodsbox .i1{font-size: 18px;font-weight: bold;margin:10px 10px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.goodsbox .goodsbottom{display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: flex-end;padding:10px;}
.goodsbox .goodsbottom .i2{font-size: 12px;color: #f76e3a;}
.goodsbox .goodsbottom .i2 em{font-size: 16px;font-style: normal;font-weight: bold;}
.goodsbox .goodsbottom .i3{font-size: 14px;color: #a1a1a1;}

/* goods page */
.main{width: calc(100% - 20px);margin: 10px;}
.main .g1{font-size: 20px;font-weight: bold;margin-bottom: 10px;line-height: 30px;width: 100%;word-break: break-all;}
.main .g2{align-items: flex-end;justify-content: space-between;display: flex;margin-bottom: 20px;}
.main .g3{font-size: 12px;color: #f76e3a;}
.main .g3 em{font-size: 16px;font-style: normal;font-weight: bold;}
.main .g4{font-size: 14px;color: #a1a1a1;}
.main .g5{margin-bottom: 70px;}
.main .g5 img{max-width: 100% !important;}
.g6{position: fixed;bottom: 0;left: 0;width: 100%;height: 40px;background-color: #ffffff;border-top: 1px solid #e5e5e5;padding: 10px 0;}
.g7{width: calc(100% - 20px);height: 40px;line-height: 40px;background-color: #f76e3a;color: #ffffff;font-weight: bold;display: block;text-align: center;margin: 0 10px;
    border-radius: 20px;}

/* me page */
.m0{padding:10px;background-color: #ffffff;border-bottom: 1px solid #e5e5e5;}
.m1{font-size: 20px;line-height: 30px;font-weight: bold;}
.m2{font-size: 14px;color: #f76e3a;}
.m3{background-color: #ffffff;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;margin-top: 20px;}
.m4{font-size: 16px;display: flex;height: 30px;line-height: 30px;align-items: center;flex-wrap: nowrap;justify-content: space-between;padding:10px 0;border-bottom: 1px solid #e5e5e5;}
.m5{height: 20px;width: 20px;margin: 0 10px;}
.m6{width: calc(100% - 60px);}
.m7{width: 20px;margin-right: 10px;}

/* store page */
.s1{    background: #ffffff;
    margin-top: 10px;
    padding: 10px 20px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;}
.s2{width: calc(100% - 100px);}
.s2 p{line-height: 30px;color: #8a8a8a;}
.s2 p span{color: #333;font-weight: bold;display: inline-block;width: 60px;}
.s3{width: 100px;display: flex;flex-direction: column;align-items: center;}
.s3 span{font-size: 14px;color:rgb(247, 101, 101);border:1px solid rgb(247, 101, 101);border-radius: 4px;margin-bottom: 10px;width: 60px;line-height: 26px;text-align: center;}
.s4{background-color: #5d469e;color: #ffffff;border-radius: 4px;width: 60px;line-height: 26px;text-align: center;margin-bottom: 10px;}
.s5{width: 100%;line-height:36px;display: block;background-color: #5d469e;color: #ffffff;border-radius: 4px;margin-top: 40px;text-align: center;}
.s6{background-color: #ff4422;color: #ffffff;border-radius: 4px;width: 60px;line-height: 26px;text-align: center;}


/* login page */
.loginmain{width: 100%;height: 100vh;display: flex;align-items: center;}
.loginbox{width: 300px;margin:0 auto;}
.loginbox .logo{width: 220px;margin: 60px 40px 10px;}

/* create page */
.c1{background-color: #ffffff;padding:10px;border-radius: 4px;display: flex;justify-content: space-between;align-items: center;}
.c2{width: calc(100%-30px);}
.c3{line-height: 24px;color:#8a8a8a;}
.c3 span{width: 50px;display: inline-block;color:#333;}
.c4{width: 30px;}
.c4 img{width: 30px;}
.c5{display: flex;align-items: flex-start;padding: 10px;background: #ffffff;border-radius: 4px;margin-top: 20px;}
.c6{width: 80px;border-radius: 4px;margin-right: 10px;}
.c7{width: calc(100% - 90px);font-size: 16px;font-weight: bold;line-height: 24px;word-break: break-all;}
.c8{width: 90px;display: flex;flex-direction: column;justify-content: center;text-align: right;}
.c9{color: #ff4422;margin-top: 10px;}
.c9 span{font-size: 20px;}
.c10{display: flex;align-items: center;margin-top: 20px;}
.c10 img{width: 20px;}
.c11{width: 30px;text-align: center;border: 0;}

/* orderlist page */
.ol1{background-color: #ffffff;padding: 10px;border-radius: 4px;margin-top: 10px;display: flex;flex-direction: column;}
.ol2{border-bottom: 1px solid #e5e5e5;width: 100%;padding-bottom: 10px;display: flex;justify-content: space-between;}
.ol3{padding: 10px 0;line-height: 20px;border-bottom: 1px solid #e5e5e5;}
.ol4{display: flex;padding: 10px 0;border-bottom: 1px solid #e5e5e5;}
.ol4 img{width:80px;margin-right: 10px;}
.ol5{position: relative;width: calc(100% - 90px);}
.ol6{font-size: 16px;font-weight: bold;line-height: 20px;word-wrap: break-word;}
.ol7{font-size: 12px;color:#ff4422;}
.ol7 span{font-size: 20px;font-weight: bold;}
.ol8{text-align: right;margin-top: 10px;}
.ol9{display: flex;flex-direction: column;justify-content: center;}
.ol10{padding-top: 10px;display: flex;justify-content: space-between;}
.ol22{color: #f76e3a;}

/* withdrawal page */
.w0{background-color: #ffffff;border-radius: 10px;padding:10px}
.w1{font-size: 20px;line-height: 30px;font-weight: bold;}
.w2{font-size: 14px;color: #8a8a8a;}
.w3{font-size: 14px;color: #f76e3a;line-height: 20px;}
.w4{background-color: #ffffff;border-radius: 10px;padding:10px;margin-top: 10px;display: flex;    flex-wrap: nowrap;justify-content: center;align-items: center;}
.w5{width: calc((100% - 2px)/3);border-right: 1px solid #e5e5e5;text-align: center;}
.w5:last-child{border-right: 0;}
.w5 p{font-size: 14px;margin-bottom: 10px;}
.w5 p:last-child{font-size: 20px;font-weight: bold;color: #f76e3a;}
.w6{width: calc(100% - 20px);height: 40px;line-height: 40px;background-color: #f76e3a;color: #ffffff;font-weight: bold;display: block;text-align: center;margin: 0 10px;border-radius: 20px;margin-top: 20px;}
.w7{width: calc(100% - 20px);height: 40px;line-height: 40px;background-color: #5d469e;color: #ffffff;font-weight: bold;display: block;text-align: center;margin: 0 10px;border-radius: 20px;margin-top: 20px;}

/* money_log page */
.ml1{margin-bottom: 10px;background-color: #ffffff;border-radius: 10px;padding:10px;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: center;}
.ml3{font-size: 14px;font-weight: bold;margin-bottom: 10px;}
.ml4{color: #8a8a8a;}
.ml5{font-size: 16px;color: #63d131;font-weight: bold;}
.ml6{font-size: 16px;color: #f76e3a;font-weight: bold;}

/* news page */
.n0{margin-bottom: 10px;background-color: #ffffff;border-radius: 10px;padding:10px;display: flex;flex-direction: row;flex-wrap: nowrap;}
.n1{width: 80px;margin-right: 10px;}
.n2{width: calc(100% - 90px);position: relative;}
.n3{font-size: 16px;font-weight: bold;margin-bottom: 4px;word-wrap: break-word;}
.n4{color: #8a8a8a;}
.n5{position: absolute;bottom: 0;right: 0;}

/* detail page */
.d1{margin-bottom: 10px;font-size: 18px;font-weight: bold;}