.contentBox{max-width: 640px; margin: 0 auto;}
/********************************header**********************************/
.content_header{width: 90%;margin: 5% auto;}
.content_header .rangeBox{width: 75%; height: 1.4rem; background: #cdcfc8; border-radius: 0.7rem;vertical-align: middle; padding-top: 0.1rem;position: relative;}
.rangeBox li{width: 20%;height: 1.3rem; color:#fff;text-align:center;line-height: 1.3rem;vertical-align: middle; font-size: 0.6rem; float: left; margin-right:2%;}
.rangeBox li.rangeBtn{ background: #6bba52; color: #fff; border-radius: 0.65rem; width: 30%;margin-left: 0.1rem; }
.rangeBox li img{width: 30%;max-width:30px;;position: relative; top: 0.05rem;}
.rangeBox li:last-of-type{position: absolute;right: -0.2rem; top: 0.05rem;}
.titleBox{width: 100%; text-align: center; margin-top: 1rem;}
.titleBox h3{font-size: 3.5rem; color: #6cbb52}
#nowdate{width: auto;}
/*****************************大屏幕*******************************************/
@media only screen and (min-height: 667px){
    .titleBox h3{font-size: 4.5rem;}
}
.titleBox p{color: #aeaeae; font-size: 1rem;}
/****************************content**************************************/
.content{width: 100%;border-top: 1px dashed #eff0f0;}
.content .listBox li{border-bottom: 1px dashed #eff0f0; padding: 5%; padding-bottom: 0px; width: 90%;}
.content .listBox li:last-of-type{border-bottom: none;}
.content .listBox li p{width: 40%;display: inline-block; height: 3rem; text-align: left; padding-left: 10%;}
.content .listBox li p strong{color: #42444a; font-size: 1rem;position: relative;top: -0.1rem; font-weight: 500;}
.content .listBox li p span{color: #85878d; font-size: 0.6rem;position: relative;top: 0.2rem;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;}
.content .listBox li p.timer{background: url("../../image/rundata/time.png") no-repeat; background-size: 1rem;}
.content .listBox li p.speed{background: url("../../image/rundata/speed.png") no-repeat left -0.05rem; background-size: 1rem;}
.content .listBox li p.calorie{background: url("../../image/rundata/calorie.png") no-repeat; background-size: 1rem;}
.content .listBox li p.pjspeed{background: url("../../image/rundata/pjspeed.png") no-repeat left -0.05rem; background-size: 1rem;}
.content .listBox li p.step{background: url("../../image/rundata/step.png") no-repeat; background-size: 1rem;}
.content .listBox li p.stride{background: url("../../image/rundata/stride.png") no-repeat; background-size: 1rem;}
.content .listBox li p.stepTotal{background: url("../../image/rundata/steptotal.png") no-repeat; background-size: 1rem;}
.content .listBox li p.heart{background: url("../../image/rundata/heart.png") no-repeat; background-size: 1rem;}
.content .tc {text-align: center;}
#shoe_name { color: #6a7180; font-size: 12px; margin-left: 10px; position: relative; bottom: 20px;}
.shoe_tips { font-size: 12px; color: #999999; }
@media screen and (max-width: 480px) {
    .share-footer {
        display: block;
    }
    .share-content {
        font-size: 1.7em;
    }
    .footer-join {
        position: static;
        -webkit-transform: translate(0%,0%);
        transform: translate(0%,0%);
        padding-top: 10px;
    }
    .fl {
        float: none!important;
    }
}