html {
    font-size: 62.5%;
}
body {
    outline:none;
    color:#334;
    height: 100%;
    font-size: 1.4rem;
    margin:0;
    padding:0;
    background:#f2f2f2;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
}
a {
    text-decoration: none;
    outline:none;
}
ol, ul, li, p {
    list-style: outside none none;
    margin:0;
    padding:0;
}

.clear {
    clear: both;
}
.wrapper {
    padding-bottom: 6rem;
}
.wrap {
    margin: 8px;
}
.fixed {
    position: fixed;
}
.icon {
    background-position: center center;
    background-repeat:no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}

/* overwrite FlexSlider */
.flexslider {
    box-shadow:none;
    border: 8px solid #fff;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 1rem;
}
.flexslider img{
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
}
.flex-control-nav {
    bottom:0;
    z-index:10;
}


/** MENU **/
.menu {
    position: fixed;
    z-index: 9999;
    bottom:0;
    left:0;
    right:0;
    border-top:1px solid #dde;
    border-bottom:1px solid #efefef;
    background: #fefefe;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f8f8f8), to(#eeeeee)) repeat-x scroll 0 0 #ffffff;
    box-shadow:0 1px 6px rgba(0, 0, 0, 0.1);
}
.menu ul {
    -webkit-box-align:center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}
.menu li {
    flex-grow: 1;
    -webkit-box-flex: 1;
    flex: 1;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    color: #485157;
    position: relative;
}
.menu li a {
    display: block;
    padding: 0.85rem 0;
}
.menu li i {
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    margin: 0 auto 0.2rem;
    background-position: center center;
    background-repeat:no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}
.menu li p {
    color: #333;
    font-size:1.2rem;
    line-height:1.5;
}
.menu li span {
    display:block;
    position:absolute;
    top:0.4rem;
    left:58%;
    width:0.6rem;
    height:0.8rem;
    border-radius:50%;
    background: #ff3333;
    color:#fff;
    font-size:0.4rem;
    padding:0.15rem 0.25rem 0.05rem 0.15rem;
}
.menu li .active p {
    color: #15548e;
}
.menu li .icon-home {
    background-image: url(../images/icon-home.png);
}
.menu li .icon-catagory {
    background-image: url(../images/icon-catagory.png);
}
.menu li .icon-import {
    background-image: url(../images/icon-import.png);
}
.menu li .icon-search {
    background-image: url(../images/icon-search.png);
}
.menu li .icon-user {
    background-image: url(../images/icon-user.png);
}
.menu li .active .icon-home {
    background-image: url(../images/icon-home-active.png);
}
.menu li .active .icon-catagory {
    background-image: url(../images/icon-catagory-active.png);
}
.menu li .active .icon-import {
    background-image: url(../images/icon-import-active.png);
}
.menu li .active .icon-search {
    background-image: url(../images/icon-search-active.png);
}
.menu li .active .icon-user {
    background-image: url(../images/icon-user-active.png);
}


/* NAV */
.nav {
    width: 100%;
}
.nav li {
    /* float: left;
    width: 25%; */
    background: #fff;
    cursor: pointer;
    vertical-align:middle;
}
.nav li a {
    height: 5.6rem;
    line-height:5.6rem;
    font-size: 1.8rem;
    text-align: center;
    color: #666;
    display: block;
    border: 1px solid #ddd;
    border-right: 0;
}
.nav li:last-child a {
    border-right: 1px solid #ddd;
}


/* 内容区域 */
.items {
    margin: 1rem 0;
}
.items li {
    border:1px solid #ddd;
    background: #fff;
    width: 100%;
    position: relative;
    margin-bottom: 1rem;
    font-size: 0;
}
.items li > span {
    position: absolute;
    left:0.8rem;
    top:1rem;
    color:#888;
    font-size: 1.1rem;
}
.items li > img {
    width: 100%;
}
.items li > h3 {
    font-size: 1.1rem;
    color:#666;
    position: absolute;
    right: 1rem;
    top: 1rem;
    margin:0;
    padding: 0;
}
.items li > div {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    width:17rem;
    height: 3rem;
    background:#666;
    border-radius: 3px;
}
.items li > div span {
    color:#fff;
    font-size:1.2rem;
    line-height: 3rem;
    margin-left: 0.7rem;
}
.items li > div span:last-child {
    color:#fff;
    background: #ff3333;
    font-size:1.5rem;
    line-height: 3rem;
    height: 100%;
    float:right;
    border-radius: 0 3px 3px 0;
    padding: 0 0.6rem;
}


/** GOODS **/
.goods {
    margin: 1rem 0;
}
.goods li {
    background: #fff;
    margin-bottom: 1rem;
    padding: 0.8rem 0.8rem 0.5rem 0.8rem;
    position: relative;
    border:1px solid #eee;
}
.goods img{
    width: 12rem;
    height: 11rem;
}
.goods .right {
    position: absolute;
    left: 14rem;
    top: 1rem;
    right:0.6rem;
}
.goods .right p:first-child {
    font-size: 1.1rem;
    color: #999;
    float: left;
}
.goods .right p:nth-child(2) {
    float: right;
    font-size: 1.1rem;
    color: #999;
}
.goods .right p:nth-child(2) i {
    color: #f60;
    font-style: normal;
}
.goods .right p:nth-child(3) {
    font-size: 1.4rem;
    line-height:1.5;
    color: #666;
    font-weight:bold;
    margin: 2rem 0 0.6rem;
    clear: both;
}
.goods .right .price{
    float: left;
}
.goods .right .price h3 {
    margin: 0;
    color: #f60;
    font-size: 2.2rem;
}
.goods .right .price p {
    text-decoration:line-through;
}
.goods .right .btn {
    background: #0aa399;
    width: 10rem;
    height: 4rem;
    border-radius: 5px;
    color: #fff;
    float: right;
    margin-right: 0.5rem;
    text-align: center;
    font-size: 1.6rem;
    line-height: 3.9rem;
}
.goods .right .btn-start {
    background: #f60;
}

/* TABS */
.tabs {
    position: fixed;
    z-index: 9999;
    top:0;
    left:0;
    right:0;
    border-bottom:1px solid #dde;
    background: #fefefe;
    box-shadow:0 1px 6px rgba(0, 0, 0, 0.1);
}
.tabspace {
    height: 4.3rem;
}
.tabs ul {
    -webkit-box-align:center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}
.tabs li {
    flex-grow: 1;
    -webkit-box-flex: 1;
    flex: 1;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    color: #485157;
    position: relative;
    font-size:1.6rem;
    height:4.2rem;
    line-height:4.2rem;
}
.tabs li a {
    padding: 1.5rem 0 1rem 0;
    color:#555;
}
.tabs li i {
    display:inline-table;
    margin-left: 0.2rem;
    width:0.8rem;
    height:1rem;
    border-radius:50%;
    background: #ff3333;
    color:#fff;
    font-size:0.6rem;
    padding:0.1rem 0.2rem;
    font-style: normal;
    line-height:1rem;
    vertical-align: top;
}
.tabs li .active {
    color:#f60;
    border-bottom:2px solid #f60;
}
.tabs-line li {
    border-right:1px solid #dde;
    line-height: 1.42;
    height:auto;
}
.tabs-line li:last-child {
    border-right:none;
}
.tabs-line li a {
    display: block;
}


/** LIST **/
.list {
    background: #fff;
    margin-bottom: 1rem;
}
.list li {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #efefef;
}
.list li:first-child {
    /* border-top: 1px solid #efefef; */
}
.list li a {
    display: block;
    padding-left: 1.2em;
}
.list li i {
    color: #666;
    font-size: 1.6rem;
    line-height: 5rem;
}
.list li span {
    margin-left: 0.4em;
    font-size: 1.7rem;
    line-height: 5rem;
    color: #555;
}
.list li a:after {
    content: "";
    float: right;
    margin-right: 1.2rem;
    width: 1.5rem;
    height: 5rem;
    background: url(data:image/png;base64,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) no-repeat center center;
    background-size: contain;
}
.list li:active, .list .selected {
    background:#efefef;
}
.list-border li {
    /* border-left: 1px solid #ddd;
    border-right: 1px solid #ddd; */
}


/** Avatar **/
.avatar {
    position: relative;
    /*background-image: url(../images/avatar-bg.jpg);*/
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    height: 36rem;
}
.avatar  > div {
    position: absolute;
    left:50%; 
    top:50%; 
    width: 10rem;
    height: 12rem;
    margin-left: -5rem;
    margin-top: -5rem;
    text-align: center;
}
.avatar  > div > img {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.4);
    box-shadow:0 0 4px #666;
}
.avatar  > div > h3 {
    font-size: 1.6rem;
    margin: 1rem 0 0.3rem;
    color: #666;
}
.avatar  > div > p {
    font-size: 1.1rem;
    margin: 0;
}

/* Frid */
.grid input {
    border: none;
    border-radius: 5px;
    width: 100%;
    height: 4rem;
    display: block;
    background:  url(../images/icon-search.png) no-repeat 5px center;
    background-size: contain;
    background-color: #fff;
    text-indent: 3rem;
    margin: 1.6rem auto;
}
.grid .type {
    background: #fff;
    font-size: 0;
    margin-bottom: 0.6rem;
}
.grid .type h4 {
    text-align: center;
    background: #0aa399;
    color: #fff;
    line-height: 3.2rem;
    margin: 0;
    font-size: 1.6rem;
}
.grid .type .yellow {
    background: #fcd200;
}
.grid .type .red {
    background: #e61973;
}
.grid .type li {
    display: inline-block;
    width: 25%;
    text-align: center;
}
.grid .type li a {
    width: 100%;
    color: #485157;
    position: relative;
    font-size:1.5rem;
    height:4rem;
    line-height:4rem;
}