/***********************
--list.css/列表样式
 **********************/
.main-nav {
  line-height:.3rem;
  margin-top:.15rem;
  margin-bottom:.2rem;
  font-size:.13rem
}
.main-nav .result {
  margin-left:.05rem;
  line-height:.25rem;
  vertical-align:middle
}
.main-nav>a,.main-nav .filter-tags>a {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  margin-left:.3rem;
  line-height:.25rem;
  font-size:.13rem
}
.main-nav>a:before,.main-nav .filter-tags>a:before {
  content:'>';
  position:absolute;
  top:.04rem;
  left:-.25rem;
  display:block;
  text-align:center;
  width:.2rem;
  line-height:.17rem;
  color:#627381;
  font-size:.12rem;
  font-family:monospace
}
.main-nav>a.else,.main-nav>a.back,.main-nav .filter-tags>a.else,.main-nav .filter-tags>a.back {
  margin-left:0;
  line-height:normal
}
.main-nav>a.else:before,.main-nav>a.back:before,.main-nav .filter-tags>a.else:before,.main-nav .filter-tags>a.back:before {
  content:'';
  width:0
}
.main-nav>a.back,.main-nav .filter-tags>a.back {
  float:right;
  height:.3rem;
  line-height:.28rem;
  padding:0 .25rem;
  font-size:.12rem;
  color:#708aa3;
  background:#202c3a;
  border:solid 1px #2a394c;
  border-radius:.14rem
}
.main-nav .filter-tags>a:not(:first-child) {
  margin-left:.1rem
}
.main-nav .filter-tags>a:not(:first-child):before {
  content:''
}
.main-nav .search-keyword,.main-nav .filter-keyword {
  padding:0 .05rem;
  background:#529fc9;
  color:#cffaff;
  font-size:.13rem;
  border-radius:.02rem
}
.main-nav .search-keyword span,.main-nav .filter-keyword span {
  vertical-align:middle;
  color:#fff
}
.main-nav .search-keyword i,.main-nav .filter-keyword i {
  margin-left:.05rem;
  vertical-align:middle
}
.sec-nav {
  position:relative;
  margin-top:.2rem;
  font-size:0;
  white-space:nowrap;
  overflow-y:hidden;
  overflow-x:auto;
  border-radius: .15rem .15rem 0 0;
}
.sec-nav:after {
  position: absolute;
    top: 100%;
    right: 0rem;
    left: 0rem;
    height: 1px;
    background-color: #eee;
    content: "";
    z-index: 2;
}
.sec-nav>li {
  position:relative;
  display:inline-block;
  height:100%;
  min-width:.8rem;
  vertical-align:top;
  text-align:center;
  font-size:.12rem;
  cursor:pointer;
  background-color: rgba(10, 17, 61, .6);
}
.sec-nav>li a {
  display:block;
  width:100%;
  height:100%
}
.sec-nav>li p {
  color:#67c1f5;
}
.sec-nav>li i {
  display:inline-block;
  margin-top:.04rem;
  width:.38rem;
  height:.38rem;
  opacity:.5
}
.sec-nav>li:first-child {
  border-top-left-radius:.06rem
}
.sec-nav>li:last-child {
  border:0;
  border-top-right-radius:.06rem
}
.sec-nav>li ul {
  position:absolute;
  display:none;
  top:100%;
  left:auto;
  right:0;
  width:3rem;
  padding:.1rem .15rem;
  margin-top:0px;
  background:#34343e;
  border-top: 3px solid #f4604b;
  white-space:normal;
  text-align:left;
  z-index:5;
}
.sec-nav>li ul li {
  display:inline-block;
  width:1.2rem;
  height:.35rem;
  line-height:.36rem;
  margin:0 .06rem .05rem;
  text-align:center;
  color:#8f98a0;
}
.sec-nav>li ul li:nth-of-type(1),.sec-nav>li ul li:nth-of-type(2) {
  border:0
}
.sec-nav>li ul li.on {
  color:#67c1f5
}
.sec-nav>li:nth-of-type(1) ul,.sec-nav>li:nth-of-type(2) ul {
  left:0;
  right:auto
}
.sec-nav>li:hover {
  color: #feffff;
    background-color: #549ecb;
}

.sec-nav>li:hover ul {
  display:block
}
.sec-nav>li.on {
  background:#549ecb
}
.sec-nav>li.on p {
  color:#fff
}
.sec-nav>li.on i {
  opacity:1
}
.sec-nav>li.others {
  position:static
}
.filter-nav {
  padding:.08rem;
  background-color: rgba(10, 17, 61, .6);
  border-radius: 0 0 .15rem .15rem; 
  border-top:1px solid rgba(103, 193, 245, .6);

}
.filter-nav>li {
  display:inline-block;
  margin:.02rem .04rem;
  vertical-align:middle
}
.filter-nav>li.dropmenu {
  max-width:.9rem;
  height:.32rem;
  color:#a3d6f3
}
.filter-nav>li.dropmenu .drop-title input,.filter-nav>li.dropmenu .drop-title input::-webkit-input-placeholder {
  color:#67c1f5;
}
.filter-nav>li.dropmenu .drop-title .edge {
  display:inline-block;
  width:0;
  height:0;
  border:.05rem solid transparent;
  overflow:hidden;
  margin-top:-.025rem;
  border-top-color:#67c1f5;
}
.filter-nav>li.dropmenu .drop-menu dd {
  line-height:.32rem
}
.filter-nav>li.dropmenu.active .drop-title .edge {
  margin-top:-.075rem
}
.filter-nav>li.dropmenu .drop-title {
  border-radius: .16rem;
    background-color: rgba(0,0,0,.6);
}
.filter-nav>li.check-box {
  display:inline-block;
  height:.36rem;
  line-height:.36rem;
  margin-left:.02rem;
  margin-right:.1rem;
  font-size:.12rem;
  color:#a3d6f3;
  vertical-align:middle
}
.filter-nav>li.check-box span,.filter-nav>li.check-box label {
  vertical-align:middle;
  line-height:normal;
  cursor:pointer
}
.filter-nav>li.search {
  position:relative;
  width:2rem;
  line-height:.3rem;
  border:solid 1px #2d3b4c;
  background:#17212d;
  white-space:nowrap
}
.filter-nav>li.search input {
  width:100%;
  padding:.05rem .1rem;
  color:#fff
}
.filter-nav>li.search button {
  height:100%;
  position:absolute;
  right:0;
  top:0;
  padding:0 .05rem;
  background:#2d3b4c;
  line-height:1
}
.filter-nav>li.search button i {
  margin:0 .05rem
}
.filter-nav>li.explain {
  line-height:.32rem
}
.filter-nav>li.explain>span {
  color:#67c1f5
}
@media only screen and (min-width:768px) {
  .nav .sec-nav {
  overflow:visible !important
}
.nav .sec-nav li.others {
  position:relative
}
.filter-nav span {
  margin-left:.1rem
}
}.section-tit {
  padding:.2rem 0;
  color:#fff;
  font-size:.18rem
}
.list {

}
.list .nav .sec-nav>li {
  width:10%
}
.pubg .nav .sec-nav>li {
  width:10%
}
.h1z1 .nav .sec-nav>li {
  width:10%
}
.nav .main-nav .appid {
  max-width:1.2rem;
  height:.3rem;
  color:#d2f86c
}
.nav .main-nav .appid .drop-title input,.nav .main-nav .appid .drop-title input::-webkit-input-placeholder {
  color:#d2f86c
}
.nav .main-nav .appid .drop-title .edge {
  display:inline-block;
  width:0;
  height:0;
  border:.05rem solid transparent;
  overflow:hidden;
  margin-top:-.025rem;
  border-top-color:#d2f86c
}
.nav .main-nav .appid .drop-menu dd {
  line-height:.3rem
}
.nav .main-nav .appid.active .drop-title .edge {
  margin-top:-.075rem
}
.nav .main-nav .appid .drop-title {
  background-color:#5c7e10
}
.nav .main-nav .appid .drop-menu {
  background-color:#21252f;
  color:#c5c3c2
}
.nav .main-nav .appid .drop-menu dd i {
  margin-right:.05rem
}
.nav .sec-nav p {
  height:.26rem;
  line-height:normal
}
.nav .dota2-mainfilter {
  padding:0 .1rem;
  background:rgba(25,36,50,.9);
  border-bottom:solid 1px #549ecb;
  font-size:0;
  white-space:nowrap
}
.nav .dota2-mainfilter>li {
  display:inline-block;
  vertical-align:top;
  cursor:default
}
.nav .dota2-mainfilter>li h4 {
  height:.2rem;
  margin:.13rem 0;
  font-size:.12rem;
  white-space:nowrap
}
.nav .dota2-mainfilter>li h4 span {
  font-size:.14rem;
  vertical-align:middle
}
.nav .dota2-mainfilter>li h4 i:first-child {
  margin-right:.05rem
}
.nav .dota2-mainfilter>li h4 i:last-child {
  margin-top:.1rem;
  opacity:.2
}
.nav .dota2-mainfilter>li .content {
  position:relative
}
.nav .dota2-mainfilter>li .content .heros-list,.nav .dota2-mainfilter>li .content .cate-list {
  position:static;
  top:0;
  z-index:1;
  font-size:0
}
.nav .dota2-mainfilter>li .content .heros-list li,.nav .dota2-mainfilter>li .content .cate-list li {
  font-size:.12rem
}
.nav .dota2-mainfilter>li .content .heros-list li a,.nav .dota2-mainfilter>li .content .heros-list li img,.nav .dota2-mainfilter>li .content .cate-list li a,.nav .dota2-mainfilter>li .content .cate-list li img {
  display:block;
  width:100%;
  height:100%
}
.nav .dota2-mainfilter>li .content .heros-list {
  display:none;
  width:3.8rem;
  max-width:300%;
  padding:.03rem;
  background:#2d3b4c;
  white-space:normal
}
.nav .dota2-mainfilter>li .content .heros-list li {
  display:inline-block;
  width:calc(20% - .02rem);
  margin:.01rem
}
.nav .dota2-mainfilter>li .content .heros-list li a {
  opacity:.5;
  border:solid 1px transparent
}
.nav .dota2-mainfilter>li .content .heros-list li a:hover,.nav .dota2-mainfilter>li .content .heros-list li a.on {
  opacity:1;
  border-color:#549ecb
}
.nav .dota2-mainfilter>li .content .cate-list {
  left:0;
  display:block;
  width:100%;
  white-space:normal;
  overflow:hidden
}
.nav .dota2-mainfilter>li .content .cate-list li {
  display:inline-block;
  width:calc((100% - .24rem)/4);
  margin-right:.08rem;
  margin-bottom:.05rem
}
.nav .dota2-mainfilter>li .content .cate-list li:nth-child(4n) {
  margin-right:0
}
.nav .dota2-mainfilter>li .content .cate-list li a {
  padding:.08rem 0;
  border-radius:.02rem;
  text-align:center;
  background:#2d3b4c;
  color:rgba(255,255,255,.5);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.nav .dota2-mainfilter>li .content .cate-list li a:hover,.nav .dota2-mainfilter>li .content .cate-list li a.on {
  color:#fff;
  background:#549ecb
}
.nav .dota2-mainfilter>li:nth-of-type(1) .content .heros-list {
  left:0
}
.nav .dota2-mainfilter>li:nth-of-type(2) {
  margin:0 .2rem
}
.nav .dota2-mainfilter>li:nth-of-type(2) .content .heros-list {
  left:50%;
  -webkit-transform:translateX(-50%);
  -moz-transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  -o-transform:translateX(-50%);
  transform:translateX(-50%)
}
.nav .dota2-mainfilter>li:nth-of-type(3) .content .heros-list {
  right:0
}
.nav .dota2-mainfilter>li.heros {
  width:calc((100% - .4rem)/3)
}
.nav .dota2-mainfilter>li.heros .content {
  background:no-repeat left top / cover
}
.nav .dota2-mainfilter>li.types {
  position:relative;
  display:none;
  width:calc(42.78% - .2rem);
  margin-left:.4rem
}
.nav .dota2-mainfilter>li.types:before {
  content:'';
  position:absolute;
  left:-.18rem;
  top:.46rem;
  display:block;
  height:.73rem;
  border-left:dashed .01rem rgba(255,255,255,.1);
  pointer-events:none
}
.nav .dota2-mainfilter>li.types h4,.nav .dota2-mainfilter>li.types .cate-list {
  padding:0 .05rem
}
.nav .dota2-mainfilter>li:hover h4 i:last-child {
  opacity:1
}
.nav .dota2-mainfilter>li:hover .content ul {
  position:absolute;
  display:block
}
.nav .dota2-mainfilter>li:hover .content ul.heros-list {
  border:solid 1px #111a25
}
.nav .dota2-mainfilter>li:hover .content ul.cate-list {
  background:#192432
}
@media only screen and (min-width:768px) {
  .nav .dota2-mainfilter>li.heros {
  width:calc(19.06% - .2rem)
}
.nav .dota2-mainfilter>li.types {
  display:inline-block
}
.nav .dota2-mainfilter>li .content {
  height:.73rem;
  margin-bottom:.24rem;
  overflow:hidden
}
.nav .dota2-mainfilter>li:hover .content {
  overflow:visible
}
.nav .dota2-mainfilter>li:hover .content ul {
  left:0 !important;
  right:auto !important;
  -webkit-transform:none !important;
  -moz-transform:none !important;
  -ms-transform:none !important;
  -o-transform:none !important;
  transform:none !important
}
}.filter-nav {
  position:relative;
  margin-bottom:.2rem
}
.filter-nav.special {
  border-radius:0;
  background:none;
  border-bottom:solid 1px rgba(255,255,255,.1)
}
.filter-nav.special .tab-head {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  margin:0
}
.filter-nav.special .tab-head a {
  display:inline-block;
  margin:0 .3rem;
  padding:0 .2rem;
  line-height:.52rem;
  font-size:.14rem;
  color:#7b92a4;
  border-bottom:solid 1px transparent
}
.filter-nav.special .tab-head a:first-child {
  border-top-left-radius:.06rem;
  border-bottom-left-radius:.06rem
}
.filter-nav.special .tab-head a:hover {
  color:#67c1f5
}
.filter-nav.special .tab-head a.on {
  color:#67c1f5;
  border-radius:0;
  border-bottom-color:#67c1f5
}
.items-list {
  text-align:left;
  overflow: hidden;
}
.items-list li {
  margin-bottom:2%;
}
@media only screen and (min-width:768px) {
  .items-list {
    overflow: visible;
  } 
  .items-list li {
  margin-bottom:4%
  }
}
@media only screen and (min-width:980px) {
  .items-list {
    overflow: visible;
  } 
  .items-list li {
  margin-bottom:4%;
  }
}

@media only screen and (min-width:1200px) {
  .items-list {
  width:100%;
  overflow: visible;
}
.items-list li {
  width:2.24rem;
  margin-bottom:.2rem
}
.items-list li .items-item {
  /*height: 2.74rem;*/
  min-height:auto;
}

.container .main-content {
  width:100%;
}
.container .related {
  width:2.24rem
}
.container .related>div .list-content {
  background:#FFF;
}
.container .related>div .list-content li .items-img {
  width:.6rem;
  height:.6rem;
  line-height:.58rem;
  margin-right:.05rem;
  background: #182330;
    border-color: rgba(250,250,250,.05);
    border-radius: .02rem;
}
.container .related>div .list-content li .sell-info .tit {
  font-size:.12rem;
  white-space:normal;
  word-break:break-all
}
}

.items-info {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 5px;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: 0.3rem;
}
.items-img {
  width: 50%;
  padding: 0;
}

.photos {
  width: 100%;

}
.photos-thumb { 
  float: right; 
  width: 23%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: 0 .1rem 0 .3rem;
}
.photos,  .photos-thumb {
  zoom: 1;
}
.photos-thumb {
  list-style-type: none;
}
.photos-thumb li {
  float: left;
  border: 2px solid #f2f2f2;
  padding: 2px;
  margin-bottom: 8px;
  position: relative;
  transition: border-color .2s ease-out;
}
.photos-thumb .current {
  border: 2px solid #f23d6a;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  cursor: auto;
}

.photos-arrow {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border: 6px dashed transparent;
  border-right: 6px solid #f23d6a;
  position: absolute;
  left: -16px;
  filter: alpha(opacity=0);
  opacity: 0;
  bottom: 35%;
  background: 0 0;
}
.current .photos-arrow {
  filter: alpha(opacity=100);
  opacity: 1;
}
.photos-thumb img {
  display: block;
  width: 100%;
  cursor: url(../images/bigmax.png), url(../images/zoom_in.cur), auto;
}
.photo-viewer, .photo-viewer img,  .photos-thumb .current img {
  cursor: url(../images/bigmin.png), url(../images/zoom_out.cur), auto;
}

.photo-viewer {
  width: 77% !important;
  height: 100% !important;
  position: relative;
  height: auto;
  border: 1px solid #ccc;
  background: #fff;
  padding: 2px;
  overflow: hidden;
  display: none;
  transition: all 0.2s ease-in;
}
.img-nonstop {
  position: absolute;
  padding-top: 48%;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  z-index: 2;
  display: none;
  text-align: center;
  overflow: hidden;
}
.photo-viewer:hover .img-nonstop {
  display: block;
  background-color: rgba(0, 0, 0, .5);
}
.img-nonstop .non-stop {
  padding: 15px 50px;
  font-size: 16px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(250, 68, 68, .8);
  /* background-image: linear-gradient(to right, rgba(255, 94, 82, 1), rgba(250, 68, 68, .8)); */
  /* background-image: linear-gradient(to right, rgba(241, 198, 122, 1), rgba(228, 178, 98, .65)); */
  /* background-color: rgba(241, 198, 122, 1); */
  /* background-color: rgba(251, 94, 94, 1); */
  border-radius: 50px;
}
.img-nonstop .non-stop:hover {
  background-color: rgba(250, 68, 68, 1);
    -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.photo-viewer img {
  width: 100%;
}
.photo-viewer-navleft,  .photo-viewer-navright {
  top: 0;
  bottom: 0;
  position: absolute;
  width: 30%;
  background: url(../images/s.gif); /*解决IE 下背景透明的空白元素无法触发 click 和 hover 事件*/
}
.photo-viewer-navleft {
  left: 0;
}
.photo-viewer-navright {
  right: 0;
}
.photo-viewer-navleft i,  .photo-viewer-navright i{
  top: 50%;
  margin-top:-24px;
  position: absolute;
  width: 48px;
  height: 48px;
  display: none;
}
.photo-viewer-navleft i{
  left: 0;
  background-image: url(../images/arrow-l.png);
}
.photo-viewer-navright i{
  right: 0;
  background-image: url(../images/arrow-r.png);
}
.items-text {
  width: 50%;
  padding: 0px 0px .4rem .15rem;
}
.items-title {
  margin: 0px;
  color: #111;
}
.items-title h2{
  margin: 0;
  line-height: 30px;
  font-size: 24px;
}
.items-title .tag {
  margin-left: 10px;
  display: inline;
  vertical-align: middle;
  padding: 2px 8px;
  border-radius: 15px;
  font-size: 16px;
  color: #fb5e5e;
  border: 1px solid #fb5e5e;
}
.items-des {
  padding: 20px 0px;
  line-height: 26px;
  min-height: 40px;
  color: #111;
  opacity: .8;
  font-size: .14rem;
}
.items-price {
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
  padding: 20px 0;
  margin-bottom: 65px;
  
}
.items-price .price{
  font-size: 30px;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #fb5e5e;
}
.price em {
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
}
.items-price .buy-help {
  float: right;
}
.buy-help a {
  font-size: 16px;
  color: rgba(239, 62, 152, .7);
}
.buy-help a:hover, .buy-help a:focus, .buy-help a:active {
  color: rgba(255, 0, 0, .8);
}
.buy-help a i{
  vertical-align: top;
  font-size: 20px;
}
.items-link {
  text-align: center; 
}
.items-link .non-stop {
  padding: 15px 50px;
  font-size: 16px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(250, 68, 68, .8);
  /*background-image: linear-gradient(to right, rgba(255, 94, 82, 1), rgba(250, 68, 68, .8));*/
  /*background-image: linear-gradient(to right, rgba(241, 198, 122, 1), rgba(228, 178, 98, .65));*/
  /*background-color: rgba(241, 198, 122, 1);*/
  /*background-color: rgba(251, 94, 94, 1);*/
  border-radius: 50px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.items-link .non-stop:hover {
  background-color: rgba(250, 68, 68, 1);
  /*background-color: rgba(250, 68, 68, 1);*/
}
.items-link .likes {
  display: inline-block;
  position: relative;
  margin-left: 10px;
  padding: 10px 30px;
  font-size: 16px;
  color: rgba(194, 194, 194, 1);
  background-color: transparent;
  border-radius: 50px; 
  border: 2px solid rgba(236, 236, 236, 1);
  width: 200px;
}
.likes i{
  vertical-align: top;
  font-size: 20px;
  margin-top: -1px;
}
.likes:hover {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(250, 68, 68, 1);
  border: 2px solid rgba(250, 68, 68, 1);
}
.likes .heart {
  display: inline;
  left: 14px;
  top: -8px;
}
.items-share {
  
}
/*猜你喜欢*/
.box {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    justify-content: space-between;
     
}
.like-wrap {
  margin:30px auto 0 auto;
}
.content-slide ul li {
  width: 23.5%;
}
.content-slide ul li:hover {
  box-shadow: none;
}
.content-slide .listpage {
  padding: .2rem;
}
.listpage li img {
  width: 100%;
  border-radius: .15rem .15rem 0 0;
}
.tabs {
  height: 50px;
  background-color: rgba(255, 255, 255, 1);
  width: 100%;
  text-align: center;
  border-radius: .15rem .15rem 0 0;
}

.tabs .part {
  display: block;
  float: left;
  width: 33.333333%;
  text-align: center;
  height: 50px;
}


.tabs a {
  width: 100%;
  display: block;
  height: 50px;
  line-height: 50px;
  color: #5f6368;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  text-decoration: none;
}
.tabs span.active {
  background-image: linear-gradient(to right, rgba(255, 94, 82, 1), rgba(250, 68, 68, .8));
  /*background-image: linear-gradient(to right, rgba(241, 198, 122, 1), rgba(228, 178, 98, .65));*/
  /*background-color: #f1c67a;*/
  /*background-color: rgba(250, 68, 68, 1);*/
  border-radius: 5px 5px 0px 0px;
}

.tabs span.active a {
  color: #fff;
}

.swiper-container {
  width: 100%;
  border-top: 0;
}

.like-wrap .swiper-slide {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  color: #ccc;
  border-radius: 0px 0px 5px 5px;
}
/*_____items                       
---------------------------------*/
.page-likes {
  overflow: hidden;
}

.listpage {  
  list-style: none;
  border-radius: 0px 0px 5px 5px;
}

.listpage li {
  width: 25%;
  float: left;
  position: relative;
  margin-bottom: 15px;
  border-radius: 0px;
  background-color: #FFF;
  overflow: hidden;
}
.listpage li:hover {
  /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);*/

}
.listpage li img {
  position: relative;
  opacity: .8;
  width: 100%;
  display: block;
  border-radius: .15rem;
  box-sizing: border-box;
  overflow: hidden;
}

.listpage li:hover img {
  transform: scale(1.2);
  opacity: 1;
  overflow: hidden;
}

.listpage a {
  display: block;
  border-radius: .15rem;
  overflow: hidden;
}

.listpage h2 {
  width: 100%;
  bottom: -10px;
  padding: 5px 15px;
  color: #000;
  font-size: .16rem;
  font-weight: normal;
  text-align: left;
  height: .4rem;
  line-height: .35rem;
  overflow: hidden;
  background-color: #FFF;
  z-index: 2;
}

.listpage .post-like {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
  background-color: rgba(0,0,0,.5);
  border-radius: 40px;
  text-align: center;
  vertical-align: middle;
  padding: 10px 11px;
  color: #fff;
  z-index: 2;
  opacity: 0;
}
.listpage li:hover .post-like{
  opacity: 1;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}
.listpage .post-like:hover {
  background-color: rgba(250, 68, 68, 1);
}
.listpage .post-like i {
  font-size: 28px;
  color: rgba(255, 255, 255, .8);

}
.listpage .post-like:hover i{
  color: rgba(255, 255, 255, 1);
}

.listpage .post-like.actived {
  color: #fff;
  background-color: rgba(255,94,82,.8);
}
.listpage .items-pro {
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: 0rem;
    left: 0rem;
    text-align: left;
    width: .5rem;
    height: .3rem;
    text-align: center;
    font-size: .15rem;
    font-weight: 700;
    line-height: .3rem;
    border-top-left-radius: .06rem;
    border-bottom-right-radius: .1rem;
    background-image: linear-gradient(90deg, rgba(255, 94, 82, 1) 0,rgba(250, 68, 68, .8) 45%, rgba(250, 68, 68, .7));
    color: #FFF;
  
}

.listpage .info-box {
  padding:15px 5px;
}
.info-box .price-box {
  padding: 3px 10px 1px;
}
.rmb{
  font-size: 14px;
  color: rgba(254, 54, 54, 1);
  margin-right: 3px;
  font-family: Arial, Helvetica, sans-serif;
}
.price {
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    /*color: #ed008c;*/
    color: #fd3636;
}
.price .m-num {
    color: rgba(254, 54, 54, 1);
    font-size: 26px;
    font-weight: bold;
    font-family: Georgia, "Times New Roman", Times, serif;
}
.style {
    color: rgba(239, 62, 152, .6);
    font-size: 14px;
    float: right;
    padding: 3px 10px 1px;
}
.listpage .items-tag {
    float: right;
    display: inline-table;
    font-size: 12px;
    color: rgba(200, 200, 200, 1);
    padding: 3px 10px 1px;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.listpage .items-tag span {
  margin-left: 5px;
  display: inherit;
}
.items-tag i {
  font-size: 20px;
}
.items-tag .tags {  
  background-color: rgba(238, 238, 238, .5);
  border-radius: 16px; 
  padding:2px 8px;
  color: rgba(0, 0, 0, .6);
}
@media (max-width: 670px) {

.items-img, .items-text {
  width: 100%;
  }
.items-text {
  padding: 0px 30px 40px 30px;
  }
.content-slide .listpage li {
  width: 50% !important;
  }
}
@media (max-width: 720px) {
.items-img, .items-text {
    width: 100%;
  }
.items-text {
  padding: 0px 30px 40px 30px;
  }
.content-slide .listpage li {
  width: 50% !important;
  }
}
/*收藏*/
.listpage .post-keep {
    position: absolute;
    top: .12rem;
    right: .12rem;
    background: rgba(0,0,0,.6);
    width: .5rem;
    height: .5rem;
    line-height: .5rem;
    border-radius: .5rem;
    text-align: center;
    vertical-align: middle;
  padding: 10px 11px;
  color: #fff;
  z-index: 2;
  opacity: 0;
}
.listpage li:hover .post-keep{
  opacity: 1;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}
.listpage .post-keep:hover {
  background-image: linear-gradient(90deg, rgba(255, 94, 82, 1) 0,rgba(250, 68, 68, .8) 45%, rgba(250, 68, 68, .7));
}
.listpage .post-keep i {
  font-size: 28px;
  color: rgba(255, 255, 255, .8);

}
.listpage .post-keep:hover i{
  color: rgba(255, 255, 255, 1);
}

.listpage .post-keep.actived {
  color: #fff;
  background-color: rgba(255,94,82,.8);
}
.keeping {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  line-height: 50px;
  padding: 11px;
  border: none;
  outline: none;
  background-color: transparent;
}
.keeping img {
  opacity: .7 !important;
  width: 100% !important;
  border: none !important;
}
.listpage .post-keep:hover img{
  opacity: 1 !important;
}

/*分类导航*/
.nav{
  /*border-radius: .06rem .06rem 0 0;*/
  border-radius: .15rem;
  background-color: #1a1a32;
  padding: .12rem 0;
  margin-bottom: .2rem;
}
.cate-icon {
  display: inline-block;
}
.classfiy-nav {
  position:relative;  font-size:0;
  white-space:nowrap;
  overflow-y:hidden;
  overflow-x:auto;
  padding: .08rem;
}
.classfiy-nav:after {
  position: absolute;
    top: 100%;
    right: 0rem;
    left: 0rem;
    height: 1px;
    background-color: #eee;
    content: "";
    z-index: 2;
}
.classfiy-nav>li {
  position:relative;
  display:inline-block;
  text-align:left;
  font-size:.12rem;
  cursor:pointer;
  padding: .089rem;
  margin: 0rem .01rem;
  vertical-align: middle;
  border-radius: .24rem;
    /*background-color: #232633;*/

}
.nav .classfiy-nav:nth-child(2)>li {
  padding: .08rem;  
}
.classfiy-nav>li .typename {
  padding-right: .12rem;
  border-right:1px solid #9f9eb1;
  vertical-align: middle;
  font-size: .14rem;
  font-weight: bold;
  color: #9f9eb1;
}
.classfiy-nav>li .typename i {
  display:inline-block;
  margin-right: .12rem;
  margin-top: -.04rem;
  width: .24rem;
  height: .24rem;
  background-size: contain;
}
.classfiy-nav>li .typename-play {
  padding-right: .18rem;
  vertical-align: middle;
  font-size: .14rem;
  font-weight: bold;
  color: #9f9eb1;  
}
.classfiy-nav>li.classfiy-item a {
  padding-left: .08rem;
  color:#67c1f5;
}
.classfiy-nav>li.classfiy-item a:hover {
  color: rgba(103,193,245,.6);
}
.classfiy-nav>li.classfiy-item:nth-child(6) a {
  padding-left: 0;
}
.classfiy-nav>li.classfiy-item:nth-child(6) a i{
  width: .22rem;
  height: .22rem;
}
.classfiy-nav>li a {
  display:inline-block;
}
.classfiy-nav>li p {
  color:#67c1f5;
}


.classfiy-nav>li ul {
  position:absolute;
  display:none;
  top:100%;
  left:auto;
  right:0;
  width:3rem;
  padding:.1rem .15rem;
  margin-top:0px;
  background:#34343e;
  border-top: 3px solid #f4604b;
  white-space:normal;
  text-align:left;
  z-index:5;
}
.classfiy-nav>li ul li {
  display:inline-block;
  width:1.2rem;
  height:.35rem;
  line-height:.36rem;
  margin:0 .06rem .05rem;
  text-align:center;
  color:#8f98a0;
}
.classfiy-nav>li ul li:nth-of-type(1),.classfiy-nav>li ul li:nth-of-type(2) {
  border:0
}
.classfiy-navli ul li.on {
  color:#67c1f5
}
.classfiy-nav>li:nth-of-type(1) ul,.classfiy-nav>li:nth-of-type(2) ul {
  left:0;
  right:auto
}
.classfiy-nav>li:hover {

}

.classfiy-nav>li:hover ul {
  display:block
}
.classfiy-nav>li.on {
  background:#549ecb
}
.classfiy-nav>li.on p {
  color:#fff
}
.classfiy-nav>li.on i {
  opacity:1
}
.classfiy-nav>li.others {
  position:static
}

.nav .sec-nav .classfiy-item {
  width: 25%;
  padding: 0 12px;
  border-radius: .24rem;
    background-color: #f8f8f8;
}
.nav .sec-nav li.classfiy-item .typename, .nav .sec-nav li.classfiy-item .typename a {
  display: inline-block;
}