.none-data{
    line-height: 320px; text-align: center; font-size: 18px; color: #B7B0B0;
}

.record-lists{
    display: flex; flex-direction: column;
}

.record-lists li{
    margin-bottom: 20px; padding: 16px 27px; border-radius: 16px 16px 16px 16px; border: 1px solid #4B83F4;
    display: flex; justify-content: space-between;
}

.record-lists li .left-box{
    width: 45%;
}

.record-lists li .left-box .state-label{
    height: 34px; padding: 0px 13px; border-radius: 6px 6px 6px 6px; border: 1px solid #4B83F4; margin-bottom: 10px;
    display: inline-block; line-height: 34px;  font-size: 16px; color: #4B83F4;
}

.record-lists li .left-box .state-label.cancel{
    color: #999; border-color: #f0f0f0;
}

.record-lists li .left-box .state-label.red{
    color: red; border-color: red;
}

.record-lists li .left-box .rq{
    display: block; line-height: 30px; margin-bottom: 6px; font-size: 14px; color: #333333; margin-bottom: 10px;
}

.record-lists li .left-box .desc{
    display: block; line-height: 30px;   font-size: 14px; color: #333333;
}

.record-lists li .right-box{
    width: 36%; display: flex; flex-direction: column; justify-content: space-between; text-align: right;
}

.record-lists li .right-box .prices{
    font-size: 28px; color: #4B83F4; line-height: 37px; font-weight: bold;
}

.record-lists li .right-box .more{
    text-align: right;
}

.record-lists li .right-box .more a{
    display: inline-block; background: #4B83F4; height: 40px; line-height: 40px; padding: 0px 12px; border-radius: 6px;
    text-decoration: none; color: white; border: solid 1px #4B83F4;
}

.record-lists li .right-box .more a:hover{
    color: #4B83F4; background-color: white;
}

/*訂單詳情*/
.detail-1-box{
    display: flex; flex-direction: column; margin-bottom: 30px; padding-bottom: 22px; border-bottom: solid 1px #f0f0f0;
}

.detail-1-box .title{
    margin-bottom: 18px; font-size: 28px; color: #4B83F4; line-height: 38px;
}

.detail-1-box .title2{
    font-size: 18px; color: #333333; line-height: 23px; margin-bottom: 12px;
}

.detail-1-box ul li{
    display: flex; margin-bottom: 8px; line-height: 28px;
}

.detail-1-box ul li label{
    width: 98px; text-align: left; margin-right: 10px; margin-bottom: 0;
}

.detail-2-box{
    display: flex; flex-direction: column; margin-bottom: 30px; padding-bottom: 22px; border-bottom: solid 1px #f0f0f0;
}

.detail-2-box .title2{
    font-size: 18px; color: #333333; line-height: 23px; margin-bottom: 12px;
}

.detail-2-box ul{
    display: flex; flex-direction: column;
}

.detail-2-box ul li{
    display: flex; margin-bottom: 13px;
}

.detail-2-box ul li a.img{
    display: inline-block; width: 85px; height: 85px; margin-right: 10px;
}

.detail-2-box ul li a.img img{
    max-width: 100%;
}

.detail-2-box ul li .boxs{
    display: flex; flex-direction: column;
}

.detail-2-box ul li .boxs a{
    color: #4B83F4; font-size: 14px; display: block; margin-bottom: 5px; text-decoration: none;
}

.detail-2-box ul li .boxs span{
    color: #333333; font-size: 14px; line-height: 20px;
}

.detail-3-box{
    display: flex; flex-direction: column; margin-bottom: 30px; padding-bottom: 22px; border-bottom: solid 1px #f0f0f0;
}

.detail-3-box .title{
    font-size: 18px; color: #333333; line-height: 23px; margin-bottom: 12px;
}

.detail-3-box .desc{
    color: #000000; font-size: 14px; margin-bottom: 30px;
}

.detail-3-box .prices-box{
    text-align: right; margin-bottom: 8px; line-height: 35px;
}

.detail-3-box .prices-box label{
     color: #333; font-size: 18px; margin-bottom: 0;
}

.detail-3-box .prices-box .price-t{
    font-size: 30px; font-weight: bold;   color: #4B83F4; margin-left: 12px;
    display: inline-block; width: 190px;
}

.detail-3-box .date{
    text-align: right; line-height: 26px; color: #4B83F4; font-size: 14px;
}


/*訂單詳情--結束*/

@media screen and (max-width: 767px) {

    .record-lists li {
        padding: 16px 12px;
        border-radius: 10px;
    }


    .record-lists li .left-box {
        width: 52.5%;
    }

    .record-lists li .left-box .state-label {
        height: 30px;
        padding: 0px 10px;
        border-radius: 4px;
        margin-bottom: 8px;
        line-height: 30px;
        font-size: 14px;
    }

    .record-lists li .left-box .rq {
        display: block;
        line-height: 26px;
        margin-bottom: 5px;
        font-size: 12px;
        color: #333333;
        margin-bottom: 10px;
    }

    .record-lists li .left-box .desc{
        display: block;
        line-height: 26px;
        margin-bottom: 0px;
        font-size: 12px;
        color: #333333;
        margin-bottom: 10px;
    }

    .record-lists li .right-box {
        width: 48%;
    }

    .record-lists li .right-box .prices {
        font-size: 20px;
        line-height: 30px;
    }

    .record-lists li .right-box .more a {
        height: 34px;
        line-height: 34px;
        padding: 0px 17px;
        border-radius: 4px;
    }

    .detail-1-box .title {
        margin-bottom: 13px;
        font-size: 18px;
        line-height: 28px;
    }

    .detail-2-box ul li .boxs{
        flex: 1;
    }

    .detail-2-box ul li .boxs a{
        text-align: right;
    }

    .detail-2-box ul li .boxs span{
        text-align: right;
    }

    .detail-1-box .title2 {
        font-size: 15px;
    }

    .detail-1-box ul li{
        font-size: 13px;
    }

    .detail-1-box ul li span{
        display: block; text-align: right; line-height: 21px; width: 100%;
    }

    .member-mains {
        padding: 22px 6px;
    }

    .detail-3-box .desc{
        text-align: right; margin-bottom: 10px;
    }

    .detail-3-box .prices-box label{
        font-size: 16px;
    }

    .detail-3-box .prices-box .price-t{
        font-size: 22px; width: auto;
    }

    .detail-3-box .date{
        font-size: 13px;
    }

    .detail-2-box .title2,.detail-3-box .title{
        font-size: 15px;
    }


}