/*
- * @description: 商品列表 css
- * @author: swallow
- * @update: name (2020-02-17 18:00)
- */

/* 广告图 */
.gl-banner{
  width:100%;
  height:100vw;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: .7rem;
  background-size:100% 100%;
}
.gl-header h2{
  font-size: 1.6rem;
  padding: .5rem .7rem;
}
.crumbs-group{
  margin: .7rem;
  padding-left: 5px;
  font-size: .7rem;
  background-color: hsla(0,0%,100%,.4);
}
/* 排序按钮 */
.filtrate-sort {
    position: sticky;
    top: 0;
    z-index: 199;
    box-sizing: border-box;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0,0,0,.2);
    background-color: #FFF;
}
    .filtrate-sort > li {
        width: 4.5rem;
        text-align: center;
    }
    .filtrate-sort .filter_line {
        width: 2px;
        height: 1rem;
        background: #D8D8D8;
    }
    .filtrate-sort span {
        padding: .25rem 0;
        display: inline-block;
        margin: 0 auto;
        font-size: .7rem;
        font-family: PingFangSC, PingFang SC;
        color: #000;
    }
    .filtrate-sort li.on span {
        border-bottom: 1px solid #000;
    }
    .filtrate-sort .sort_price_icon {
        width: .35rem;
        vertical-align: middle;
    }
    .filtrate-sort .filter_icon {
        width: .9rem;
        height: .95rem;
        vertical-align: middle;
    }

.tag_wrap {
    position: sticky;
    top: 2.6rem;
    z-index: 199;
    width: 100vw;
    height: 2.2rem;
    overflow: hidden;
    background-color: #FFF;
}

.tag_ulbox {
    width: 100vw;
    height: 3.2rem;
    white-space: nowrap;
    overflow-x: auto;
}
    .tag_ulbox > li {
        display: inline-block;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-size: .65rem;
        margin: 0 1rem 0 .6rem;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #888;
    }
        .tag_ulbox > li.on {
            color: #CD924F;
        }
/* 商品列表 */
.page-show {
    font-size: .7rem;
    padding: .7rem;
}
.list-wrap{
  display: grid;
  width: 100vw;
  padding: 0 3vw;
  grid-template-columns: repeat(2, 45.5vw);
  grid-column-gap: 3vw;
  grid-row-gap: 5vw;
  margin-bottom: 1rem;
}
    .list-wrap > a {
        text-align: center;
    }
.img-group{
  position: relative;
  margin-bottom: .25rem;
  background-color:#f3f3f3;
}
.tags-box,
.gl-icon{
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  z-index:99;
  text-align: center;
}
.gl-icon .crd-collected{
  color: #CD924F;
}
.tags-box {top:.5rem; left: .5rem; height:1.25rem; line-height: 1.25rem; border: 1px solid #EEE; background-color: #FFF; font-size: .6rem; border-radius: .24rem;}

.gl-name{
  padding: 0 .5rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
  margin-bottom: .25rem;
  color: #888;
  font-size: .6rem;
}

.gl-price{
  color: #000;
  margin-top: .6rem;
  font-size: .6rem;
}
.gold_price {
    color: #999;
}
    .gold_price span {
        display: inline-block;
        margin-right: 4px;
    }
    .gold_price span:last-child {
        margin-left: auto;
    }
/*专题页*/
.list-wrap7 {
    grid-column-end: span 2;
}
.list-wrap7 .gl-name{
  font-size: 1rem;
}
.list-wrap7 .gl-price{
  font-size: .6rem;
}

.list-wrap15{
  grid-column-end: span 2;
}
.list-wrap15 .gl-name{
  font-size: 1rem;
}
.list-wrap15 .gl-price{
  font-size: .6rem;
}
/* 分页信息 */
.list-footer {
    display: none;
    text-align: center;
    font-size: .65rem;
    line-height: .9rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
    .footer1 {
        font-size: .65rem;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #888;
    }

.footer2 {
    font-size: .65rem;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #666;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .footer2 > a {
        display: inline-block;
        margin: 0 .4rem;
        color: #000;
        text-decoration: underline;
    }
/* 筛选窗口 */
.filter_dialog {
    position: fixed;
    left: 0;
    bottom: -100vh;
    z-index: 1200;
    width: 100vw;
    height: 100vh;
    text-align: center;
    transition: all 200ms;
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    font-size: .7rem;
    /*justify-content: space-between;*/
}

.filter_top {
    box-sizing: border-box;
    margin-bottom: .4rem;
    width: 100vw;
    height: 2.8rem;
    text-align: left;
    display: flex;
    align-items: flex-end;
}

    .filter_top span:first-child {
        padding: 1rem 0 0 .3rem;
        flex-shrink: 0;
        width: 3.4rem;
        font-size: .8rem;
        font-weight: bold;
    }

    .filter_top span:last-child {
        padding-right: 3.4rem;
        width: 100%;
        text-align: center;
    }

.filter_body {
    height: calc(100% - 7rem); /*5.9rem;*/
    overflow-y: auto;
}

.filter_dl_title {
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    box-sizing: border-box;
    padding: 0 .8rem;
}

    .filter_dl_title > span {
        flex-shrink: 0;
        margin-left: auto;
        display: inline-block;
        height: 2.6rem;
        line-height: 2.6rem;
        padding-left: 2.6rem;
    }

.dd_item_show {
    display: flex;
    flex-wrap: wrap;
    padding: 0 1.6rem;
}

.arrs_item {
    width: 50%;
    height: 1.825rem;
    display: flex;
    align-items: center;
}

    .arrs_item .img2 {
        vertical-align: middle;
        margin-right: .4rem;
    }

    .dd_item_hide {
        display: none;
    }

.filter_btns {
    padding: .5rem 0;
    width: 100vw;
    margin-top: auto;
    display: flex;
    justify-content: space-evenly;
}

.left_btn {
    border: 1px #261D0F solid;
    height: 2.1rem;
    line-height: 2.1rem;
    width: 8.275rem;
    color: #261D0F;
    text-align: center;
}

.right_btn {
    border: 1px #141314 solid;
    background-color: #141314;
    height: 2.1rem;
    line-height: 2.1rem;
    width: 8.275rem;
    color: #FFF;
    text-align: center;
}
/* 排序窗口 */
.sort-dialog {
    position: fixed;
    left: 0;
    bottom: -110vh;
    width: 100vw;
    height: 100vh;
    text-align: center;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}
.sort-group{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #FFF;
  padding: .5rem 0;
  border-top: 1px solid #D2D2D2;
}
.sort-group > li{
  font-size: .7rem;
  height: 1.8rem;
  line-height: 1.8rem;
}
.sort-group span{
  display: none;
  width: .4rem;
  height: .4rem;
  margin: 0 .25rem;
  background-color: #CD924F;
  border-radius: 100%;
}

/*筛选弹窗*/
.filtrate-dialog{
  position: fixed;
  top: 0;
  left: -110vw;
  width: 100vw;
  height: 100vh;
  z-index: 9990;
  background-color: #FFF;
  -webkit-transition: left 200ms;
  -moz-transition: left 200ms;
  -ms-transition: left 200ms;
  -o-transition: left 200ms;
  transition: left 200ms;
}
.btn-close{
  width: 100%;
  height: 3rem;
  text-align: right;
}
.btn-close i{
  display: inline-block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  margin: .5rem;
}
.filtrate-list{
  width: 100%;
  height: calc(100vh - 10.3rem);
  padding: 0 .75rem;
  font-size: .7rem;
  overflow-y: auto;
  overflow-x: hidden;
}
.filtrate-list > li{
  margin-bottom: 1.2rem;
}
.f-h3{
  display: flex;
  justify-content: space-between;
  justify-items: center;
  align-items: center;
  height: 1.8rem;
}
.f-h3 span{
  display: inline-block;
  width: .4rem;
  height: .4rem;
  border-radius: 100%;
  background-color: #CD924F;
  margin-right: .5rem;
}
.f-h3 div{
  width: 100%;
}
.f-h3 i{
  display: block;
  font-size: 1.4rem;
}
.sub-filtrate{
  display: none;
  padding: .7rem 0 0 .75rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  -ms-transition: all 200ms;
  -o-transition: all 200ms;
  transition: all 200ms;
}
li.choose ul{
  display: block;
}
.sub-filtrate li{
  padding: .25rem 0 .25rem .75rem;
}
.sub-filtrate li span{
  display: inline-block;
  width:.5rem;
  height:.5rem;
  border: 1px solid #D2D2D2;
  margin-right: .5rem;
}
.sub-filtrate li.active span{
  border-color: #CD924F;
  background-color: #CD924F;
}
.filtrate-result{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: .5rem;
  background-color: #FFF;
}
.filtrate-result:before{
  content: '';
  display: table;
}
.clear-all{
  border-top: 1px solid #D2D2D2;
}
.clear-all span{
  display: inline-block;
  padding:  .25rem .75rem;
  margin-top: .75rem;
  font-size: .4rem;
  border: 1px solid #333;
}
.result-group{
  height: 2rem;
  line-height: 2rem;
  width: 100%;
  overflow-x: auto;
  font-size: .6rem;
  margin: .5rem 0;
  white-space: nowrap;
}
.result-group > li{
  display: inline-block;
  margin-right: .5rem;
}
.result-group i{
  width: 2rem;
  text-align: center;
  font-size: .6rem;
  margin-right: .25rem;
}
.btn-fok{
  height: 2rem;
  line-height: 2rem;
  background-color: #333;
  text-align: center;
  color: #FFF;
}

.sale-box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:0;
}

.badge-box{
  display: inline-block;
  /*max-width: 1.75rem;*/
  margin-right: .25rem;
  z-index:100;
}
/*今日金价*/
.gl-header {
    position:relative;
}
    .gl-header .goldprice-group {
        position: absolute;
        left: 0;
        bottom: 70px;
        width: 100%;
    }
.goldprice-group > div {
    color: #CD924F;
    /*text-align: center;*/
    margin-bottom: 10px;
    font-size: 20px;
    margin-left:80px;
}
.price-list {
    width: 57vw;
    margin-left:15px;
    font-size:10px;
}
    .price-list li {
        display: flex;
        border: 1px solid #CD924F;
        margin-bottom: 10px;
    }
    .price-list span {
        width: 70px;
        background-color: #CD924F;
        color: #FFF;
        flex-shrink: 0;
        text-align-last: justify;
        padding: 0 3px;
        margin-right: 5px;
    }