/*
- * @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.4rem;
  padding: .3rem .7rem;
}
.crumbs-group{
  margin: .7rem;
  padding-left: 5px;
  font-size: .7rem;
  background-color: hsla(0,0%,100%,.4);
}
/* 排序按钮 */
.filtrate-sort{
  display: flex;
  justify-content: space-between;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 .7rem;
  font-size: .7rem;
}
.filtrate-sort > div{
  width: 44vw;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #000;
  padding: .25rem;
  text-align: center;
}

/* 商品列表 */
.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;
}
.img-group{
  position: relative;
  margin-bottom: .25rem;
  background-color:#f3f3f3;
  text-align: center;
}
.tags-box,
.gl-icon{
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  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; */
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  /* margin-bottom: .25rem; */
  text-align: center;
}

.gl-price{
  color: #999;
  text-align: center;
}
  /*专题页*/
.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{
  margin-bottom: 1rem;
  text-align: center;
}
.list-footer p{
  display: block;
  margin: 0 auto;
  font-size: .7rem;
  padding: .5rem 0;
}
.list-footer p.btn-more{
  border: 1px solid #333;
  width: 80vw;
  text-align: center;
}
.list-footer p i{
  display: inline-block;
  width:1rem;
  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;
    }