.appheader{ height: 70px; background: #189d00; box-shadow: rgba(0,0,0,0.02) 0 2px 8px; padding: 0 15px;}
a{ text-decoration: none; color: #333333;}
a:hover{ color: #ff6600; }
.topcont{ width: 1200px; margin: 0 auto;}
.menubox{ margin-left: 50px;}
.menubox ul li { color:#555555; margin: 0 20px; cursor: pointer;}
.menubox ul li a{ color:#ffffff;}
.menubox ul li nuxt-link:hover{ color:#ff6600;}

.mainbox{ width: 1200px; margin: 30px auto 0 auto;  }
.mainbox3{ width: 1200px; margin: 30px auto 0 auto; display: flex; }
.mainbox1{ width: 1200px; margin: 30px auto 0 auto; display: flex; flex-direction: column;}

.index-talent{order:5;}
.index-goods{order:2;}
.index-brand{order:3;}
.index-shop{order:4;}
.index-video{order:1;}


.ranklist{ display: flex; align-items: center; margin-top:10px;}
.ranklist a{ display: flex; align-items: center; position: relative; margin-bottom: 5px; border-radius: 15px; margin-right: 8px; cursor: pointer; justify-content: center; height: 30px; padding: 0 15px; background: #f3f4f6;}
.ranklist a:hover{ background: #ff6600; color: #ffffff;}
.ranklist a.active{ background: #ff6600; color: #ffffff;}
.righttop a i{ position: absolute; right: -4px; top: -13px;}

.ranklist p{ width: 100px; color: #666666; flex-shrink: 0;margin-bottom: 5px;}
.searchBox{ margin-top:20px;}
.searchBox p{width: 100px; color: #666666; height:30px; display: flex; align-items: center; flex-shrink: 0;}


.searchRight a{display: flex; align-items: center; margin-bottom: 4px; border-radius: 15px; margin-right: 8px; cursor: pointer; justify-content: center; height: 30px; padding: 0 15px; background: #f3f4f6;}
.searchRight a:hover{ background: #ff6600; color: #ffffff;}
.searchRight a.active{ background: #ff6600; color: #ffffff;}
.listcont{ background: #ffffff; padding:10px 20px; border-radius: 10px; margin-top:18px;}

.list{ margin-top:25px;}
.listhead{ background: #f7f8fa; height: 40px;}
.listhead p{ display: flex; align-items: center; color:#86909c; padding-left: 10px;}
.listhead p.active{ width: 120px; flex-shrink: 0;}
.listhead p.pt{ flex: 1; justify-content: center;}

.listitem p{ display: flex; align-items: center;padding: 10px 0 10px 10px; color: #1d2129;}
.listitem p.pt{ flex: 1; justify-content: center;}
.listitem p.active{ width: 120px; flex-shrink: 0;}

a.seemore{display: flex; align-items: center; height: 26px; justify-content: center; border-radius: 13px; background: #fafff7; color: #189d00; padding: 0 12px;}
a.seemore:hover{ background: #189d00; color: #ffffff;}

.listitem:nth-child(odd){ background: #f7f8fa;}


a.btnbox{ display: flex; align-items: center; height: 36px; border-radius: 18px; cursor: pointer; padding: 0 18px; color:#ffffff; font-size: 14px; background: #0e5e00;}
a.btnbox:hover{ background: #0e5e00; }


a.morelink{ color: #0066ff;}
a.morelink:hover{ color: #ff6600;}

.mbhide{ display: block;}
.pchide{ display: none!important;}

.listpmain{width:360px; flex-shrink: 0;}
.listppx{width:80px; flex-shrink: 0;justify-content: center;}

.detailbox{ display: flex; align-items: self-start; justify-content: space-between;}

.goodsleft{order:2; margin-left: 20px;}
.goodsright{order:1; margin-left: 0!important;}





@media only screen and (max-width: 767px) {
    .listppx{display: none!important;}
    .listpmain{width:100%; flex-shrink: 0;}
    .mbhide{ display: none!important;}
    .pchide{ display: block;}
    .mainbox3{ width: 100%!important;}

    .logo{ width: 100%; justify-content: space-between;}
    .logo a img{ width: 60px!important;}
    .topcont{ width: 100%; }
    .topright{ display: none;}
    .mainbox{ width: 100%; padding: 0 0px; }
    .menubox{ margin-left: 10px; }
    .menubox ul li{ margin: 0 0px;}
    .menubox ul li a{ padding: 5px 15px;}

    .banner{ padding: 20px 0;}
  
    .mainbox{margin: 20px auto 0 auto;}
    .mainbox h2{ font-size: 18px; margin-left: 0px; text-align:center; }
    .ranklist{ flex-wrap: wrap;}
    .searchBox{margin-top:12px;}
    .searchBox p{ width: auto; margin-right: 10px;}
    .mblist{ margin-top:20px;}
    .mblistitem{ margin-bottom: 20px;}
    a.mbgoodscover{ width: 100px; height: 100px; flex-shrink: 0; border-radius: 5px; overflow: hidden;}
    a.mbgoodscover img{ width: 100px; height: 100px; object-fit: cover; display: block;}

    .mblistinfo{ margin-left: 10px; height: 100px;}

    p.infop{ margin-bottom: 3px; font-size: 12px; color: #888;}

    .mbbloggercover{ width: 60px; height: 60px; flex-shrink: 0; border-radius: 30px; overflow: hidden;}
    .mbbloggercover img{width: 60px; height: 60px; object-fit: cover; display: block;} 


    
    .detailbox{ display: block;}

}