@media (min-width: 1200px) {  .container {width: 1200px;}  }
body{background-color: #F8F8F8;}
/*头部*/
.hpoi-collect-head{display: flex;padding: 20px 0;margin: 0 30px;background-color: #FFFFFF;border-bottom: 1px solid #EEEEEE;}
.hpoi-collect-head .head>img{width: 60px;height: 60px}
.hpoi-collect-head .info{margin-left: 10px;padding: 7px 0;flex: 1;}
.hpoi-collect-head .info p{margin-bottom: 0;}
.hpoi-collect-head .info p:first-child{font-size: 18px;color: #444444;}
.hpoi-collect-head .info p:last-child{color: #666666;margin-top: 6px;}

/*底部*/
.hpoi-collect{background-color: #FFFFFF;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);border-radius: 6px;}
.hpoi-collect-container{display: flex;}
/*tab栏*/
.hpoi-collect-tab{border-right: 1px solid #EEEEEE;width: 180px;padding-top: 8px;}

/*通用*/
.collect-mark .title-box{display: none;}
.collect-mark .title>img{transform:rotate(180deg);transition: var(--transition-all-2s);}

.hpoi-collect-tab .collect-label .title,
.hpoi-collect-tab .collect-item .title{
    display: flex;justify-content: space-between;align-items: center;color: #444444;font-size: 16px;cursor: pointer;
}
.collect-label .title-box,
.collect-item .title-box {
    padding: 0;margin-bottom: 0;
}
.collect-label .title-box li,
.collect-item .title,
.collect-label .title
{padding-left: 30px;padding-right: 10px;}
.collect-item .title>img,.collect-label .title>img{width: 12px;}

/*周边、厂商、作品、内容、二手*/
.collect-item .title-box a{color: #666666;cursor: pointer;padding-left: 30px;padding-right: 20px;;display: flex;align-items: center;justify-content: space-between;border-left: 2px solid transparent;}
.collect-item .title-box a>.son-box img{width: 30px;height: 30px;margin-right: 6px;border-radius: 2px;}
/*.collect-item .title-box a>.son-box{color: unset;}*/

/*收藏标签*/
.collect-label .title-box li{display: flex;align-items: center;}
.collect-label .title-box li>div>a{color:#999999;flex: 1;display: flex;justify-content: space-between;align-items: center;height: 33px;}
.collect-label .title-box li>div>a>span{color:#666666;font-size: 14px;}
.collect-label .title-box li>div{width: 100%;padding: 0 10px;background: #F8F8F8;border-radius: 6px;}

.collect-label .title,
.collect-label .title-box li,
.collect-item .title,
.collect-item .title-box a{
    height: 50px;
}

/*右侧内容*/
.hpoi-collect-list{flex: 1;padding: 0 30px 20px 30px;}
.collect-navbar{display: flex;align-items: center;justify-content: space-between;height: 60px;border-bottom: 1px solid #EEEEEE;}
.collect-navbar .navbar-lt,.collect-navbar .navbar-rt{display: flex;align-items: center;margin: 0;padding: 0;}
.collect-navbar .navbar-lt >li>a,.collect-navbar .navbar-rt >li>a{;font-size: 14px;color: #666666;}
.collect-navbar .navbar-lt >li+li{margin-left: 40px;}
.collect-navbar .navbar-rt >li+li{margin-left: 20px;}

/*选中样式*/
.collect-mark .title-box>a:hover{background-color: #F8F8F8;}
.tab-up>img{transform:rotate(0) !important;}
.on{background-color: #E0F7FF !important;color: #35CDFF !important;border-left-color: #35CDFF !important;}
.collect-navbar .navbar-lt>li>a.active{position: relative;z-index: 1;color: #333333;font-size: 18px;}
.collect-navbar .navbar-lt li>a.active:after{
    z-index: -1;
    content: " ";
    display: block;
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 0;
    height: 4px;
    background-color: #35CDFF;
    border-radius: 63px;
}
.collect-navbar .navbar-rt li>a.active{color: #35CDFF!important;}
.hpoi-defect-icon{text-align: center;padding: 134px 0 !important;height: auto !important;}
.hpoi-defect-icon img{width: 114px;}
.hpoi-defect-icon p {font-size: 14px;margin-top: 10px;}

.collect-navbar .navbar-rt .dropdown-menu>li.active>a{background-color: #35CDFF !important;}
.icon-switch-big:hover,.icon-switch-default:hover{color: #35CDFF}
/*****通用*****/
.collect-company-content,
.collect-hobby-content,
.collect-resale-content
{
    display: flex;flex-wrap: wrap;margin: 20px -10px 0 -10px;min-height: 415px;
}
/*大*/
.collect-company-list-large,
.collect-hobby-list-large,
.collect-resale-list{
    width: 20%;padding: 0 10px 30px 10px;
}
