#main{
    min-width: 1240px;
    background-color: #F9F9F9;
    background-image: url(/public/img/suit-banner.png);
    background-repeat: repeat-x;
    background-position: top;
    background-size: auto 240px;
}

.com_crumb {
    margin: 130px 0 26px;
    color: #fff;
}
.com_crumb .com_crumb_link::after {
    border-color: #fff;
}

.navBox{
    background-color: #fff;
    padding: 32px 48px 14px;
    border-radius: 6px 6px 0 0;
    /* overflow: hidden; */
    display: flex;
    justify-content: space-between;
}
.navBox .form{
    /* float: right; */
    background: #FFFFFF;
    border: 1px solid #DADADA;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.navBox .form .input-group{
    width: 360px;
    border: none;
    margin: 0;
    padding: 9px 32px 9px 12px;
    box-sizing: border-box;
}
.navBox .form .submit-btn{
    position: absolute;
    width: 18px; height: 18px;
    cursor: pointer;
    right: 12px; top: 8px;
    background: url(/public/img/icon-find.png) no-repeat center / contain;
}
.nav-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;    margin: 8px 0 10px;
}
.nav-list > li{
    /* -webkit-box-flex: 1;-ms-flex: 1;flex: 1; */
    margin-right: 48px;
}
.nav-list-item{
    background-color: #ffffffe6;
    font-size: 18px;
    font-family: Microsoft YaHei;
    color: #000000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    line-height: 1;
    cursor: pointer;
}

.nav-list-item:hover{color: var(--theme-color);}
.nav-list-item h1{
	font-size:18px;
}
.nav-list-item .comming-tip{position: relative;}
.nav-list-item .comming-tip::after{
    content: "\656c\8bf7\671f\5f85";
    font-size: 12px;
    border-radius: 3px;
    padding: 8px 12px;
    background-color: #333;
    color: #fff!important;
    line-height: 1;
    margin-left: 10px;
    position: absolute;
    white-space: nowrap;
}
.nav-list-item i{
    width: 18px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 12px;
    height: 18px;
}
.nav-list-item i.icon-media1{background-image: url(/public/img/media_list-icon1.png);}
.nav-list-item i.icon-media2{background-image: url(/public/img/media_list-icon2.png);}
.nav-list-item i.icon-media3{background-image: url(/public/img/media_list-icon3.png);}
.nav-list-item i.icon-media4{background-image: url(/public/img/media_list-icon4.png);}
.nav-list-item i.icon-media5{background-image: url(/public/img/media_list-icon5.png);}

.nav-list-item.active{
    background-color: #fff;
    color: #000000!important;position: relative;
    font-weight: bold;
}
.nav-list-item.active::after{
    content: "";
    width: 100%;
    height: 4px;
    background: #3269FF;
    border-radius: 2px;
    position: absolute;
    bottom: -12px;
}
.nav-list-item.dropdown{position: relative;}
.nav-list-item.dropdown .icon{
    display: inline-block;
    width: 6px;
    height: 4px;
    vertical-align: middle;
    transition: transform ease .3s;
    transform-origin: center; margin-left: 8px;
    margin-top: -2px; background-size: contain;
    background-image: url(/public/img/icon-arr-gr.png);
}
.nav-list-item.dropdown:hover{
    color: var(--theme-color)!important;
}
.nav-list-item.dropdown .nav-dropdown-cont{
    display: none; position: absolute; top: 20px;
    padding: 10px 0;
    background: #FFFFFF;
    border-radius: 4px;
    margin-top: 18px;
    -webkit-box-shadow: 1px 3px 10px 1px rgb(0 8 50 / 5%);
    box-shadow: 1px 3px 10px 1px rgb(0 8 50 / 5%);
    word-break: keep-all;
}
.nav-list-item.dropdown .nav-dropdown-cont::after{
    content: ""; position: absolute;
    height: 20px; width: 100%; display: block;
    top: -20px; background-color: transparent;
}
.nav-list-item.dropdown:hover .nav-dropdown-cont{
    display: block;
}
.nav-list-item.dropdown .nav-drop-item{
    margin: 0;
    padding: 10px 20px;
    color: var(--text-primary-color);
    font-size: 14px; 
    display: block;
    line-height: 1;
    cursor: pointer;
}
.nav-list-item.dropdown .nav-drop-item:hover{
    color: var(--theme-color);
}

.filter-section{display: none;}

.media-section{min-height: calc(100vh - 400px);}
.media-main .media-empty{
    padding: 144px 0; border-radius: 0 0 6px 6px;
    background-color: #fff; font-size: 18px;
    text-align: center; color: #666;
}
.media-item{
    margin-bottom: 24px;
    background-color: #fff;
    padding: 48px;
    border-radius: 6px;
}
.media-info-main{display: flex;}
.media-info-cont{display: flex;align-items: center;justify-content: space-between;}
.media-icon-img-cont,.media-icon-img{width: 160px;height: 160px;}
.media-icon-img-cont{
    margin-right: 36px;
    background-color: #5398f5;
    border-radius: 12px;
}
.media-setTitle{
    font-size: 24px; margin-top: 4px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #000000;
    line-height: 40px;
}
.media-setInfo{
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 24px; margin-bottom: 32px;
}
.media-setCoun{display: flex;}
.media-setCoun > div{line-height: 1;padding-right: 48px;margin-right: 48px;height: 40px;border-right: 1px solid #DADADA;text-align: center;}
.media-setCoun > div:nth-last-child(1){border: none;padding-right: 0;margin-right: 0;}
.media-setCoun .media-setCoun-ti{
    font-size: 18px;margin-bottom: 10px;
    font-weight: bold;
    color: #000000; 
}
.media-setCoun .media-setCoun-inf{
    font-size: 14px;
    color: #999;
}
.media-info-account{
    width: 160px; text-align: center;
}
.media-info-account.pc_hid{display: none;}
.media-info-accountt{
    padding: 14px 0;
    background-color: #FFFFFF;
    border: 1px solid #DADADA;
    border-bottom: none;
    border-radius: 6px 6px 0px 0px; line-height: 1;
}
.media-info-accountt .money-now{
    color:var(--theme-color); font-size: 24px; font-weight: 600;
}
.media-info-accountt .money-before{
    margin-top: 2px;
    text-decoration: line-through;
    font-size: 14px; color: #999;
}
.media-info-account .btn{
    font-size: 16px;
    height: 48px;   line-height: 48px;
    border-radius: 0px 0px 6px 6px;
}
.media-set-list-cont{
    border-top:1px solid #DADADA;
    margin-top: 36px; padding-top: 24px;
    display: flex; flex-wrap: wrap;
    max-height: 64px; overflow: hidden;
}
.media-set-list-cont.open{max-height: 1000px;}
.media-set-list-cont .media-list-item{
    font-size: 14px;
    color: #000000;
    /* cursor: pointer; */
    line-height: 38px; 
    width: 20%; padding-left: 22px; padding-right: 18px;
    white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
    background: url(/public/img/icon-play.png) no-repeat left center / 14px;
}
/* .media-set-list-cont .media-list-item:hover{color: var(--theme-color);} */
.media-show-more{
    font-size: 14px; font-weight: bold; color: #3269FF;
    line-height: 1;margin-top: 18px; text-align: center;
    cursor: pointer; width: 120px; margin: 18px auto 0;
}
.media-show-more:hover{text-decoration: underline;}


@media (max-width: 750px) {
    #main{
        min-width: auto;
        background-size: auto 180px;
    }
    .com_crumb {
        margin: 115px 0 16px;
    }
    .navBox{
        flex-direction: column;
        padding: 16px 15px 18px;
    }
    .nav-list{ justify-content: space-between;}
    .nav-list > li{margin-right: 0; }
    .navBox .form{margin-top: 18px;}
    .nav-list-item{
        font-size: 12px;
        flex-direction: column;
        padding-bottom: 12px;
    }

    .nav-list-item h1{
        font-size:12px;
    }
    .nav-list-item i{ 
        margin-right: 0; margin-bottom: 8px;
        width: 24px; height: 24px;
    }
    .nav-list-item.dropdown > span{margin-left: 12px;}
    .nav-list-item.dropdown .nav-dropdown-cont{top: 32px;}
    .nav-list-item.active::after{bottom: 0;}

    .media-info-account.mob_hid{display: none;}
    .media-info-account.pc_hid{display: block;}

    .media-main .media-empty{font-size: 12px;}
    
    .media-item{
        margin-bottom: 16px;
        padding: 24px 15px;
    }
    .media-icon-img-cont,.media-icon-img{width: 120px;height: 120px;}
    .media-icon-img-cont{
        margin-right: 18px;
    }
    
    .media-setTitle{
        font-size: 18px; margin-top: 6px;
        line-height: 26px;
    }
    .media-setInfo{
        font-size: 12px;
        line-height: 20px; margin-bottom: 24px;
    }
    .media-setCoun > div{padding-right: 24px;margin-right: 24px;height: 36px;}
    .media-setCoun .media-setCoun-ti{
        font-size: 14px;margin-bottom: 8px;
    }
    .media-setCoun .media-setCoun-inf{
        font-size: 12px;
    }
    .media-info-account{
        width: 100%; margin-top: 24px;
    }
    .media-info-accountt .money-now{
        font-size: 18px;
    }
    .media-info-accountt .money-before{
        font-size: 12px; 
    }
    .media-info-account .btn{
        font-size: 14px;
        height: 48px;   line-height: 48px;
    }
    .media-set-list-cont{
        margin-top: 18px; padding-top: 8px;max-height: initial;
    }
    .media-set-list-cont .media-list-item{
        font-size: 12px;
        line-height: 24px; 
        width: 50%; padding-right: 0;
        background: url(/public/img/icon-play.png) no-repeat left center / 12px;
    }
    .media-show-more{
        font-size: 12px;width: 100px; margin: 18px auto 0;
    }
}