body {
    font-family: arial,sans-serif;
    line-height: 1.8;
    font-size: 16px;
    color: #555;
    font-weight: 300;
    overflow-x: hidden;
    background: #fff
}

a {
    color: #232221;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

a:hover {
    text-decoration: none;
    color: #337ab7;
}

td, th {
    border: 1px solid #dddddd;
    padding: 6px 10px
}
/* 公共头部样式 start */
#header {
    position: fixed;
    width: 100%;
    height: 3.5em;
    background: #337ab7;
    text-align: center;
    z-index: 999;
    margin: 0 auto;
}
#header .head-content-box{
    width: 81%;
    height: 100%;
    line-height: 3.5em;
    margin: 0 auto;
}
#header .head-content-box #siteName:hover a{
    color: #e4e4e3!important
}
#header .head-content-box #siteName a {
    color: #fff;
    font-size: 1.5em;
}
#header .avatar {
    height: 100%;
    width: 3.5em;
    float: left;
}

#header .avatar img {
    border-radius: none;
    height: 100%;
}

#header .avatar img:hover {
    border-color: #d1f1e9
}

#header h1 {
    color: #fff;
    font-size: 1.5em;
    float: left;
    line-height: 56px;
    box-sizing: border-box;
    margin: 0;
}

#header .nav {
    font-weight: 400;
    float: left;
    line-height: 3.5em;
    padding: 0 3%;
}

#header .nav ul {
    padding: 0;
    width: 100%;
    line-height: 3.5em;
}
#header .nav ul::after{
    content: '';
    display: block;
    clear: both;
}

#header .nav ul li {
    list-style: none;
    margin: 0;
    float: left;
    width: 9em;
}
#header .nav ul li.active {
    background: #f1f3f4;
}
#header .nav ul li.active a {
    color: #337ab7;
}

#header .nav a {
    color: #fff;
    font-size: 1.25em;
}

#header .nav ul li.vip a {
    color: #ffc107;
}
#header .nav ul li.vip a i{
    font-size: 1em;
}

#header .nav a:hover {
    cursor: pointer;
    color: #e4e4e3!important
}

#header .nav ul li ul {
    position: absolute;
    display: none;
    margin-left: 6em;
    margin-top: -34px;
    padding: 0 15px;
    border-radius: 4px;
    background: #3498db;
    white-space: nowrap;
    z-index: 2000
}

#header .nav ul li ul a {
    font-size: 14px
}

#header .nav ul li:hover ul {
    display: block
}

#header .weixin {
    color: #fff;
    font-size: 14px;
    float: left;
    position: relative;
}
#header .weixin:hover .ShowWeixin {
    animation: alternate toShow 0.3s both;
}
#header .weixin .ShowWeixin {
    width: 12em;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5em;
    background-color: #ddd;
    visibility: hidden;
}
#header .weixin img {
    width: 100%;
}
#header .login{
    float: right;
    height: 3.5em;
    margin-right: 0.2em;
    color: #fff;
    position: relative;
}
#header .login span {
    color: #fff;
    font-size: 1.25em;
    font-weight: 300;
    cursor: pointer;
}
#header .login i,.weixin i{
    color: #fff;
    font-size: 1.5em;
    margin-right: 0.5em;
    cursor: pointer;
    vertical-align: middle;
}
#header .login:hover .userInfo {
    animation: toShow 0.3s both;
}
#header .login .userInfo{
    width: 12em;
    position: absolute;
    background-color: #337ab7;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.5em;
    padding: 0.2em;
    visibility: hidden;
}
#header .login .userInfo ul {
    width: 100%;
    padding: 0.2em;
}
#header .login .userInfo ul li{
    width: 100%;
    list-style: none;
    text-align:left;
    border-bottom: 1px dotted #fff;
    line-height: 2em;
    color: #efefef;
}
#header .login .userInfo ul li span{
    display: inline-block;
    width: 35%;
    text-align: right;
    font-size: 1em;
    font-weight: 600;
}
#header .mobile{
    display: none;
    visibility: hidden;
}
.kefu-box{
    position: fixed;
    right: 0;
    background-color: #337ab7;
    width: 4.5em;
    height: 2.5em;
    line-height: 2.5em;
    z-index: 10;
    top: 50%;
    text-align: center;
    font-size: 1em;
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    padding: 0.2em;
    color: #fff;
    cursor: pointer;
}
.kefu-box i{
    font-size: 1.5em;
    color: #fff;
    vertical-align: bottom;
}
@keyframes toShow {
    from {
        visibility: hidden;
        opacity: 0;
    } to {
        visibility: visible;
        opacity: 1;
    }
}
@keyframes toHide {
    from {
        visibility: visible;
        opacity: 1;
    } to {
        visibility: hidden;
        opacity: 0;
    }
}

/* 公共头部样式 end */

#main,#footer {
    width: 90%;
    overflow: hidden;
    padding-top: 4em;
    margin: 0 auto;
}

#main .box {
    width: 100%;
    margin: 0 auto
}
/* 首页部分样式 start */
#main .index-search-box{
    padding: 2em 0;
    display: flex;
    padding: 15px;
    background-color: #efefef;
    width: 100%;                    /* 改为100%，继承#main的90%，避免二次缩小 */
    margin: 30px auto;
    border-radius: 5px;
}
#main .upload-search{
    height: 3em;
}
#main .banzou-upload{
    min-width: 10%;
    height: 100%;
    background-color: #337ab7;
    color: #fff;
    border: none;
    border-radius: 0.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    padding: 0 0.8em;
    font-size: 1em;
    transition: all 0.3s ease;
    white-space: nowrap;
    cursor: pointer;
}
#main .banzou-upload:hover{
    background-color: #2868a0;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(51, 122, 183, 0.3);
}
#main .banzou-upload:active{
    transform: translateY(0);
}

#main .huozhe-span{
    width: 18%;
    display: inline-block;
    height: 100%;
}
#main .huozhe-sarch {
    width: 85%;
    display: inline-block;
    height: 100%;
}
#main .upload-search button i,
#main .upload-search a i {
    font-size:1.1em;
    margin-right: 0.3em;
}
#main .huozhe-sarch input{
    width: 90%;
    height: 100%;
    line-height: 100px;
    text-indent: 1em;
    border: 1px solid #337ab7;
}
#main .huozhe-sarch input:focus-visible {
    /* border: 2px solid #337ab7; */
    border: none;

}
#main .huozhe-sarch .banzou-search{
    height: 100%;
    background-color: #337ab7;
    color: #fff;
    border: none;
    border-radius: 0.2em;
    padding: 0 0.5em;
}

/* 艺考专区部分样式 start */
.index-yikao-input {
    width: 100%;                    /* 改为100%，继承#main的90%，避免二次缩小 */
    margin: 10px auto;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
    vertical-align: middle;
    text-align: center;
    line-height: 60px;
    background-color: #efefef;
}
.index-yikao-input-box {
    height: 100%;
    width: auto;
    display: inline-block;
    line-height: 100%;
}
.index-yikao-input span {
    float: left;

}
.index-yikao-input a {
    float: left;
    text-align: center;
    font-size: 24px;
    color: #337ab7;
}
.index-yikao-input span:first-child{
    margin-right: 5px;
    font-size: 32px;
}
.index-yikao-input span:last-child {
    margin-left: 25px;
    color: #337ab7;

}
/* 艺考专区部分样式 end */

/* 伴奏列表块样式 start */
#main .index-banzou-album {
    width: 100%;                    /* 改为100%，继承#main的90%，避免二次缩小 */
    margin: 0 auto;
    margin-top: 30px;
}
#main .hot_title {
    line-height: 40px;
    margin-bottom: 0;
}
#main .hot_title a{
    font-size: 32px;
    display: inline-block;
    line-height: 40px;
    font-weight: 300;
}
#main .banzou-ul-album {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
#main .banzou-ul-album li {
    list-style: none;
    float: left;
    margin-left: 1%;
    margin-bottom: 1%;
    background-color: #efefef;
    border-radius:10px;
    width: 14%;
    height: 14%;
}
#main .banzou-ul-album li:nth-child(6n+1){
    margin-left: 0%;
}
#main .banzou-ul-album li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 26px;
    color: #337ab7;
}
#main .banzou-ul-album li a.noicon {
    font-size: 3em;
    font-weight: 200;
    line-height: 4.1em;
}
#main .banzou-ul-album li a span:first-child{
    display: inline-block;
    width: 100%;
    font-size: 3.2em;
    height: 70%;
}

/* 伴奏列表块样式 end */
#main .index-banzou-nav {
    width: 100%;                    /* 改为100%，继承#main的90%，避免二次缩小 */
    margin: 10px auto;
}
#main .index-banzou-nav>p{
    font-size: 32px;
    color: #232221;
    margin-bottom:0;
}
#main .index-banzou-nav .banzou-ul{
    width: 100%;
    height: 3em;
    line-height: 3em;
    padding-left: 0;
    margin: 0 auto;
    display: flex;
}
#main .index-banzou-nav .banzou-ul li{
    width: 12em;
    list-style: none;
    float: left;
    text-align: center;
    border: 1px solid #e4e4e3;
    border-right: none;
}
#main .index-banzou-nav .banzou-ul li.active{
    background-color: #555;
    color: #e4e4e3;
}
#main .index-banzou-nav .banzou-ul li.active>a{
    color: #e4e4e3;
}
#main .index-banzou-nav .banzou-ul li:first-child{
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
#main .index-banzou-nav .banzou-ul li:last-child{
    border-right: 1px solid #e4e4e3;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;

}
#main .index-banzou-nav .banzou-ul li > a{
    color: #232221;
    display: inline-block;
    height: 100%;
    width: 100%;
    font-size: 20px;
}
#main .show_more{
    width: 100%;                    /* 改为100%，继承#main的90%，避免二次缩小 */
    margin: 0.2em auto;
}
#main .show_more>a {
    display: inline-block;
    width: 100%;
    height: 3em;
    line-height: 3em;
    text-align: center;
    background-color: #337ab7;
    color: #fff;
    border-radius: 0.2em;
}
#main .show_more>a:hover{
    color: #fff;
}
/* 伴奏列表块样式 */
.banzou-list{
    width: 100%;
    display: flex;
}
.banzou-list .banzou-list-empty{
    width: 100%;
    padding: 1em 0;
}
.banzou-list .banzou-list-empty>p{
    font-size: 1.2em;
}
.banzou-list .banzou-list-empty>p span{
    color: #f56329;
}
.banzou-list .banzou-list-empty .dingzhi{
    border-radius: 0.5em;
    background-color: #f1f3f4;
    padding: 1em;
}
.banzou-list .banzou-list-empty .dingzhi p{
    font-size: 1.1em;
}
.banzou-list .banzou-list-empty .dingzhi p.dingzhi-title{
    font-size: 1.2em;
    text-align: center;
}
.banzou-list > ul.banzou-list-ul {
    width: 100%;
    padding-left: 0;
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li {
    width: 48.5%;
    margin-right: 0.7%;
    float: left;
    height: 7.8em;                 /* 大屏默认高度，给标题+标签留足空间 */
    line-height: 7.8em;
    background: linear-gradient(180deg,#f9fbff,#eef3fb); /* 与首页一致的卡片背景 */
    border: 1px solid #dfe8f5;
    padding: 0.3em;
    position: relative;
    list-style: none;
    border-radius: 8px;
    box-sizing: content-box;
    margin-bottom: 1%;
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li:nth-child(even) {
    margin-right: 0;
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-img {
    border-radius: 0.6em;
    background-color: #6694bb;
    display: inline-block;
    width: 5.5em;                  /* 播放卡更大 */
    height: 5.5em;
    line-height: 5.5em;
    position: absolute;
    top:calc(50% - 2.75em);
    left: 0.8em;
    border: none;
    cursor: pointer;
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-img>i {
    font-size: 2em;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-title {
    position: absolute;
    left: 6.2em; 
    top: 1.2em; 
    display: inline-block;
    max-width: 60%;                /* 避免与按钮冲突 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 2;
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-title>a{
    cursor: pointer;
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-title>span{
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.2em;
    font-size: 0.8em;
    border-radius: 0.3em;
    color: #fff;
}
.banzou-title>span.type1,.type2{
    background-color: #4c75bd;
    border: 1px solid #4c75bd;
}
.banzou-title>span.type3{
    background-color: #d69636;
    border: 1px solid #d69636;
}
.banzou-title>span.type4{
    background-color: #6ba16b;
    border: 1px solid #6ba16b;
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-info {
    display: flex;              /* 胶囊标签横向并可换行 */
    flex-wrap: wrap;
    align-items: center;
    margin-left: 6.2em;
    margin-top: 3.6em;          /* 大屏：标题top=1.2em，标签需足够间距（3.6-1.2=2.4em） */
    line-height: 1;             /* 避免继承 6em 行高 */
    height: auto;
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-info>a {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 6px 6px 0;
    border-radius: 999px;       /* 胶囊 */
    cursor: pointer;
    background: #edf3fa;
    color: #337ab7;
    border: 1px solid #d6e4f5;
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-info>a:hover{ background:#e6effb; }
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-audio{
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%; 
    transform: translate(-50%, -50%);
    color:#667;                 /* 与首页一致的弱化颜色 */
    font-size:14px;
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-audio>audio{
    width: 100%;
    height: 1em;
}
audio::-webkit-media-controls-download-button,
audio::-webkit-media-controls-context-menu-button {
    display: none !important;
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-button{
    height: auto;
    line-height: 1.2;
    float: left;
    position: absolute;
    top: 50%; 
    right: 1.5em;                            /* 大屏：按钮在右侧，留足距离 */
    transform: translate(0, -50%);           /* 大屏：水平不偏移，仅垂直居中 */
    display:flex; gap:8px;                   /* 大屏：默认横向排列 */
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-button>button{
    height: auto; padding:8px 14px; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-button .collect_banzou{ background:#edf3fa; color:#337ab7; border:1px solid #d6e4f5; }
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-button .collect_banzou:hover{ background:#e6effb; }
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-button .download_banzou{ background:#337ab7; color:#fff; border:1px solid #337ab7; }
.banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-button .download_banzou:hover{ background:#2b6ea3; }
/* 首页部分样式end */


/* 伴奏列表部分样式 start */
.banzou-list-search{
    width: 90%;
    padding: 0.5em;
    position: fixed;
    left: 5%;
    z-index: 999;
    background-color: #f1f3f4;
    box-sizing: border-box;
}
.banzou-list-search>input{
    width: 90%;
    text-indent: 10px;
    height: 40px;
    line-height: 40px;
    border:1px solid #337ab7;
    border-radius: 0.2em;
}
.banzou-list-search>button{
    height: 40px;
    background-color: #337ab7;
    color: #fff;
    border: none;
    border-radius: 0.2em;
    padding: 0 0.6em;
}
.banzou-list-navs{
    width: 100%;                    /* 改为100%，继承#main的90%，避免二次缩小 */
    margin: 0 auto;
    margin-top: 70px;
    background: #fff;
    border: 1px solid #e6eef5;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
    box-sizing: border-box;         /* 确保 padding 和 border 不增加宽度 */
}
.banzou-list-navs .banzou-qudiao-div,.banzou-yueqi-div{
    width: 100%;
    margin: 6px auto;
    display: flex;
    align-items: flex-start;
}
.banzou-list-navs .banzou-qudiao-div>div , .banzou-yueqi-div>div{
    flex: 0 0 5em;
    padding: 6px 0;
    font-size: 16px;
    text-align: left;
    font-weight: 600;
    color: #223;
}
.banzou-list-navs .banzou-qudiao-div ul.banzou-qudiao,.banzou-yueqi-div ul.banzou-qudiao{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 0;
    margin: 0;
}
.banzou-list-navs .banzou-qudiao-div ul.banzou-qudiao li,.banzou-yueqi-div ul.banzou-qudiao li{
    list-style: none;
}
.banzou-list-navs .banzou-qudiao-div ul.banzou-qudiao li>a , .banzou-yueqi-div ul.banzou-qudiao li>a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #d6e4f5;
    background: #edf3fa;
    color: #337ab7;
    font-size: 16px;
}
.banzou-list-navs .banzou-qudiao-div ul.banzou-qudiao li>a:hover , .banzou-yueqi-div ul.banzou-qudiao li>a:hover {
    background: #e6effb;
}
.banzou-list-navs .banzou-qudiao-div ul.banzou-qudiao li.active>a,
.banzou-list-navs .banzou-yueqi-div ul.banzou-qudiao li.active>a,
.banzou-list-navs .banzou-qudiao-div ul.banzou-qudiao li>a.active,
.banzou-list-navs .banzou-yueqi-div ul.banzou-qudiao li>a.active{
    background-color: #337ab7 !important;
    color: #fff !important;
    border-color: #337ab7 !important;
}
.banzou-bread-navs-div{
    width: 100%;                    /* 改为100%，继承#main的90%，避免二次缩小 */
    margin: 0 auto;
    box-sizing: border-box;         /* 确保宽度计算准确 */
}
#main .list-banzou-nav{
    width: 100%;                    /* 改为100%，继承#main的90%，避免二次缩小 */
    margin: 0 auto;
    box-sizing: border-box;         /* 确保宽度计算准确 */
}
#main .page {
    text-align: center;
}
/* 伴奏列表部分样式 end */

/* 详情页样式 start */
#main .detail-banzou-nav{
    width: 100%;                    /* 改为100%，继承父容器#main的90%，避免二次缩小 */
    margin: 0.5em auto;
    background: linear-gradient(180deg,#ffffff,#f7f9fc);
    border: 1px solid #e6eef5;
    border-radius: 12px; 
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
#main .banzou-bread-navs-div-left{
    padding: 0.5em;
}
#main .detail-banzou-nav::after{
    content: '';
    display: block;
    clear: both;
}
.banzou-detail .banzou-left {
    width: 30%;
    margin: 0 auto;
    padding: 2em;
    min-height: 300px;
    text-align: center;
    float: left;
    position: relative;
}
.banzou-detail .banzou-left .banzou-play {
    width: 12em;
    height: 12em;
    border-radius: 2em;
    background: linear-gradient(180deg,#6ea1cc,#4e7fb1);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.banzou-detail .banzou-left .banzou-play>i{
    font-size: 5em;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.banzou-detail .banzou-right {
    width: 70%;
    min-height: 5em;
    padding: 2em;
    padding-left: 0;
    margin: 0 auto;
    float: right;
}
.banzou-detail .jianpu {
    width: 50%;
}
.banzou-detail .jianpu img{
    width: 100%;
}
.banzou-detail .banzou-right .audio-box{
    width: 100%;
    padding: 0.5em 0;
    position: relative;
}
.banzou-detail .banzou-right .audio-box audio{
    width: 100%;
}
.banzou-detail .banzou-right .audio-box>span{
    display: inline-block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    background-color:#f1f3f4;
    width: 2.5em;
    height: 2.5em;
}
.banzou-detail .banzou-right .banzou-right-button {
    width: 100%;
}
.banzou-detail .banzou-right .banzou-right-button{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.banzou-detail .banzou-right .banzou-right-button button{ height:auto; padding:10px 16px; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.08); border:1px solid #d6e4f5; background:#edf3fa; color:#337ab7; }
.banzou-detail .banzou-right .banzou-right-button .collect_banzou{ background:#edf3fa; color:#337ab7; border:1px solid #d6e4f5; }
.banzou-detail .banzou-right .banzou-right-button .collect_banzou:hover{ background:#e6effb; }
.banzou-detail .banzou-right .banzou-right-button .download_banzou{ background:#337ab7; color:#fff; border:1px solid #337ab7; }
.banzou-detail .banzou-right .banzou-right-button .download_banzou:hover{ background:#2b6ea3; }
.banzou-detail .banzou-right .banzou-right-button .need_more{ background:#edf3fa; border:1px solid #d6e4f5; }
.banzou-detail .banzou-right .banzou-right-button .need_more a{ display:inline-block; color:#337ab7; padding:0 2px; }
.banzou-detail .banzou-right p{
    margin:1.0em auto;
}
.banzou-detail .banzou-right p.detail_notice {
    background-color: #ffff001a;
    padding: 0.5em;
    border-radius: 0.5em;
}
/* 覆盖旧的最后一个按钮为黄色的样式，统一按钮风格 */
.banzou-detail .banzou-right .banzou-right-button button:last-child{ margin-left:0; width:auto; border-radius:999px; }
.banzou-detail .banzou-right .banzou-right-button button:last-child>a{ color:#337ab7; }

/* 在线变调样式 start */
.banzou-change-pitch{
    background: linear-gradient(180deg,#f9fbff,#eef3fb);
    border:1px solid #dfe8f5;
    border-radius:12px;
    padding: 1.5em;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
    margin-top: 1.5em;
    clear: both;
    width: 100%;
}
.change-pitch-header h4{
    margin:0 0 0.5em 0;
    font-size:1.3em;
    color:#337ab7;
    font-weight:600;
}
.change-pitch-header .change-tip{
    margin:0 0 0.8em 0;
    font-size:0.95em;
    color:#667;
    line-height:1.5;
}
.biandiao-tips{
    background: linear-gradient(135deg, #fff3cd 0%, #ffe8a1 100%);
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 0.8em 1em;
    margin-bottom: 1.2em;
    font-size: 0.9em;
    color: #856404;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}
.biandiao-tips:hover{
    background: linear-gradient(135deg, #ffe8a1 0%, #ffd966 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,193,7,.25);
}
.biandiao-tips-btn{
    display: inline-block;
    background: #f0ad4e;
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    margin-left: 8px;
    font-size: 0.9em;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(240,173,78,.3);
}
.pitch-buttons{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.pitch-group{
    display:flex;
    flex-wrap: wrap;
    gap:10px;
    justify-content:space-between;
}
.pitch-btn{
    flex:1 1 auto;
    min-width: calc(16.666% - 10px);  /* 大屏：每行6个 */
    padding:10px 12px;
    border-radius:8px;
    border:1px solid #dfe8f5;
    background:#fff;
    color:#337ab7;
    font-size:15px;
    cursor:pointer;
    transition:all 0.3s ease;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
    font-weight:500;
}
.pitch-btn i{
    font-size:14px;
    margin-right:4px;
}
.pitch-btn.down{
    background: linear-gradient(135deg, #337ab7 0%, #2867a0 100%);
    color:#fff;
    border-color:#337ab7;
}
.pitch-btn.down:hover{
    background: linear-gradient(135deg, #2867a0 0%, #1e5388 100%);
    transform: translateY(-2px);
    box-shadow:0 4px 12px rgba(51,122,183,.3);
}
.pitch-btn.up{
    background: linear-gradient(135deg, #f0ad4e 0%, #ec971f 100%);
    color:#fff;
    border-color:#f0ad4e;
}
.pitch-btn.up:hover{
    background: linear-gradient(135deg, #ec971f 0%, #d58512 100%);
    transform: translateY(-2px);
    box-shadow:0 4px 12px rgba(240,173,78,.3);
}
.pitch-btn:active{
    transform: translateY(0);
    box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.pitch-btn:disabled{
    background:#e9ecef!important;
    color:#adb5bd!important;
    border-color:#dee2e6!important;
    cursor:not-allowed;
    transform:none!important;
}
.change-notice{
    margin-top:1em;
    padding:0.8em 1em;
    background:#fff3cd;
    border:1px solid #ffeaa7;
    border-radius:8px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:0.9em;
    color:#856404;
}
.change-notice i{
    font-size:1.2em;
    color:#f0ad4e;
}
.download-change-box{
    margin-top:1.5em;
    text-align:center;
}
.btn-download-change{
    display:inline-block;
    padding:12px 30px;
    background: linear-gradient(135deg, #28a745 0%, #20a83b 100%);
    color:#fff;
    border-radius:999px;
    font-size:16px;
    font-weight:600;
    box-shadow:0 4px 15px rgba(40,167,69,.3);
    transition:all 0.3s ease;
    text-decoration:none;
}
.btn-download-change:hover{
    background: linear-gradient(135deg, #20a83b 0%, #1e8e32 100%);
    transform: translateY(-2px);
    box-shadow:0 6px 20px rgba(40,167,69,.4);
    color:#fff;
}
.btn-download-change i{
    font-size:18px;
    margin-right:6px;
}
/* 在线变调样式 end */

/* 变调管理页面样式 start */
.change-page-content{
    width: 100%;
    margin: 0 auto;
}
/* 步骤提示样式 */
.steps-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 25px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    margin: 30px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
}
.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    transition: all 0.3s ease;
}
.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22px;
    right: -50%;
    width: 100%;
    height: 2px;
    background: #dee2e6;
    z-index: 1;
}
.step-item.completed:not(:last-child)::after {
    background: #28a745;
}
.step-number {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
    background: #dee2e6;
    color: #6c757d;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
    z-index: 2;
}
.step-content {
    text-align: center;
    width: 100%;
}
.step-title {
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
}
.step-desc {
    font-size: 13px;
    color: #6c757d;
}
.step-arrow {
    position: absolute;
    right: -30px;
    top: 18px;
    color: #28a745;
    font-size: 18px;
    z-index: 10;
}
.step-item.active .step-number {
    background: #337ab7;
    color: white;
    border-color: #337ab7;
    box-shadow: 0 0 0 4px rgba(51, 122, 183, 0.2);
}
.step-item.active .step-title {
    color: #337ab7;
}
.step-item.completed .step-number {
    background: #28a745;
    color: white;
    border-color: #28a745;
}
.step-item.completed .step-title {
    color: #28a745;
}
.step-item.processing .step-number {
    background: #ffc107;
    color: #212529;
    border-color: #ffc107;
}
.step-item.processing .step-title {
    color: #ffc107;
}
/* 变调说明样式 */
.change-tips {
    display: flex;
    align-items: flex-start;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 1px solid #ffeaa7;
    border-radius: 12px;
    padding: 20px;
    margin: 20px auto;
    box-shadow: 0 2px 10px rgba(255, 193, 7, 0.15);
}
.tip-icon {
    font-size: 24px;
    margin-right: 12px;
    margin-top: 3px;
}
.tip-content {
    flex: 1;
}
.tip-title {
    font-size: 16px;
    font-weight: 600;
    color: #856404;
    margin-bottom: 6px;
}
.tip-text {
    font-size: 14px;
    color: #856404;
    line-height: 1.5;
}
/* 上传部分 */
.upload-section {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    padding: 25px;
    background: #fff;
    border-radius: 12px;
}
.btn-upload {
    font-size: 18px;
    border: 2px solid #337ab7;
    border-radius: 12px;
    background-color: #337ab7;
    height: 55px;
    line-height: 55px;
    text-align: center;
    color: #fff;
    margin: 15px auto;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(51, 122, 183, 0.3);
    cursor: pointer;
}
.btn-upload:hover {
    background-color: #2867a0;
    border-color: #2867a0;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(51, 122, 183, 0.4);
}
.btn-upload.success {
    background-color: #28a745;
    border-color: #28a745;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}
.btn-upload.success:hover {
    background-color: #20a83b;
    border-color: #20a83b;
}
.btn-upload i {
    font-size: 20px;
    margin-right: 6px;
}
.upload-tips {
    margin-top: 15px;
}
.upload-tips .tip-item {
    font-size: 14px;
    color: #6c757d;
    margin: 6px 0;
}
/* 变调按钮区域 */
.biandiao-section {
    margin: 20px auto;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #fff;
    border-radius: 12px;
}
.biandiao-section .biandiao-tips {
    text-align: left;
    background: linear-gradient(135deg, #fff3cd 0%, #ffe8a1 100%);
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 12px 15px;
    margin: 0 0 20px 0;
    font-size: 15px;
    color: #856404;
    cursor: pointer;
    transition: all 0.3s ease;
}
.biandiao-section .biandiao-tips:hover {
    background: linear-gradient(135deg, #ffe8a1 0%, #ffd966 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,193,7,.25);
}
.biandiao-section .biandiao-tips-btn {
    display: inline-block;
    background: #f0ad4e;
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    margin-left: 8px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(240,173,78,.3);
}
.pitch-adjustment {
    margin: 10px 0;
}
.button-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.button-container button {
    flex: 1;
    font-size: 16px;
    padding: 12px 8px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    font-weight: 500;
}
.button-container button i {
    font-size: 14px;
    margin-right: 4px;
}
.button-container.jiangbtn button {
    background: linear-gradient(135deg, #337ab7 0%, #2867a0 100%);
    color: #fff;
}
.button-container.jiangbtn button:hover:not(:disabled) {
    background: linear-gradient(135deg, #2867a0 0%, #1e5388 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(51,122,183,.3);
}
.button-container.shengbtn button {
    background: linear-gradient(135deg, #f0ad4e 0%, #ec971f 100%);
    color: #fff;
}
.button-container.shengbtn button:hover:not(:disabled) {
    background: linear-gradient(135deg, #ec971f 0%, #d58512 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(240,173,78,.3);
}
.button-container button:disabled {
    background: #e9ecef !important;
    color: #adb5bd !important;
    cursor: not-allowed;
    transform: none !important;
}
/* 我的列表 */
.myList {
    font-size: 20px;
    margin: 30px auto 15px;
    color: #666;
    text-align: center;
    font-weight: 600;
}
.myScroll {
    margin: 15px auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 15px;
    min-height: 200px;
}
.empty-tip {
    text-align: center;
    padding: 50px 20px;
    color: #999;
    font-size: 16px;
}
.zhuanhuan-exp {
    border-bottom: 1px dotted #ddd;
    padding: 15px 0;
}
.zhuanhuan-exp:last-child {
    border-bottom: none;
}
.zhuanhuan_info {
    padding: 0;
}
.zhuanhuan_list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.zhuanhuan-title {
    font-size: 16px;
    color: #333;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 15px;
}
.change_status {
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 999px;
    margin-right: 10px;
}
.change_status.success {
    color: #28a745;
    background: #d4edda;
}
.change_status.fail {
    color: #dc3545;
    background: #f8d7da;
}
.change_status.process {
    color: #ffc107;
    background: #fff3cd;
}
.zhuanhuan-btn {
    color: #337ab7;
    font-size: 24px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}
.zhuanhuan-btn:hover {
    color: #2867a0;
    transform: scale(1.1);
}
.zhuanhuan-btn.fail {
    color: #ccc;
    cursor: not-allowed;
}
.zhuanhuan-btn i {
    font-size: 24px;
}
/* 变调管理页面样式 end */

/* 详情页动态谱样式 */
#main .banzou-dongtaipu {
    width: 100%;                    /* 改为100%，继承父容器#main的90%，确保居中 */
    margin: 0 auto;
    background-color: #f1f3f4;
    text-align: center;
}
/* 详情页中间切换样式 */
#main .detail-banzou-content {
    width: 100%;                    /* 改为100%，继承父容器#main的90%，确保居中 */
    margin: 30px auto;
}
#main .detail-banzou-content .banzou_detail_nav {
    height: 2.4em;
    line-height: 2.4em;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    margin: 1em auto;
}
#main .detail-banzou-content .banzou_detail_nav::after{
    content: '';
    display: block;
    clear: both;
}
#main .detail-banzou-content .banzou_detail_nav li {
    list-style: none;
    float: left;
    font-size: 1.6em;
    cursor: pointer;
    text-align: center;
    padding: 0 1em;
    min-width: 3em;
    border: 1px solid #337ab7;
    border-left: none;

}
#main .detail-banzou-content .banzou_detail_nav li.active {
    background-color: #337ab7;
    color: #fff;
}
#main .detail-banzou-content .banzou_detail_nav li:first-child{
    margin-left: 0;
    border-left: 1px solid #337ab7;
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
}
#main .detail-banzou-content .banzou_detail_nav li:last-child{
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}
.banzou-detail-list .banzou-list {
    display: none;
}
.banzou-detail-list .banzou-list-active {
    display: block;
}
/* 详情页样式 end */

/* VIP介绍页样式 start */
#main .vip-banzou {
    width: 100%;                    /* 改为100%，继承#main的90%，避免二次缩小 */
    margin: 0 auto;
    background-color: #f1f3f4;
    border-radius: 1em; 
    padding: 1em;
}
#main .vip-banzou .vip-banner h1 {
    text-align: left;
    margin: 0.2em 48px;
}
#main .vip-banzou .vip-banner>p{
    margin: 0.2em 2em;
    text-align: left;
    font-size: 1.5em;
}
#main .vip-banzou .vip-banner>p:last-child{
    color: #ff4400;
}
#main .vip-banzou .table-container {
    margin: 0.5em 2em;
    display: flex;
    flex-direction: column;
}
#main .vip-info {
    margin: 2em auto;
    border-radius: 0.5em;
    position: relative;
    border: 1px dotted #555;
    padding: 1em 0;
    width: calc(100% - 4em);
}
#main .vip-info>p{
    margin: 0.2em 2em;
    font-size: 1.5em;
    color: #ffc107;
    width: 50%;
    border-bottom:1px dotted #555;
}
#main .vip-info p span.vip_title{
    display: inline-block;
    width: 55%;
    font-weight: 600;
}
#main .vip-info p span.new{
    display: inline-block;
    width: 3.2em;
    text-align: center;
    /* color: #ffc107; */
}
#main .vip-info p span.old {
    text-decoration:line-through;
    font-size: 0.8em;
    color: #555;
}
#main .vip-info .payment-qr{
    position: absolute;
    right: 25%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center ;
}
#main .vip-info .buy-img{
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center ;
}
#main .vip-info .buy-img>p,.payment-qr>p{
    text-align: center;
    color: #337ab7;
}
#main .vip-info .buy-img img,.payment-qr img{
    width: 7em;
}
.vip_page .need_buy {
    width: 50%;
    margin: 1em auto;
    padding: 0.5em;
    font-weight: 600;
    border-radius: 0.5em;
    cursor: pointer;
}
.vip_page .need_buy>a {
    background-color: #ffc107;
    display: inline-block;
    color: #fff;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 1em 0;
    font-size: 1.2em;
    border-radius: 1em;
}
.vip_page .need_buy>a:hover{
    color: #fff;
}

.vip_page .table-row {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #ddd;
}
.vip_page .cell {
    flex: 1;
    text-align: center;
    color: #555;
    line-height: 3em;
    border-right:1px solid  rgb(228, 228, 228);
}
.vip_page .cell.no {
    color: red;
}
.vip_page .cell.yes {
    color: green;
}
.vip_page .cell.price{
    color: #ffc107;
    font-weight: 700;
}
.vip_page .cell:last-child{
    border-right:none
}
.vip_page .header {
    font-weight: bold;
    background-color: #337ab7;
    border-radius: 0.2em;
}
.vip_page .header .cell {
    color: #fff;
    font-size: 1.2em;
}
.vip_page .free_tips{
    text-align: left;
    color: rgb(228, 228, 228);
    margin: 15rpx auto;
    padding-left: 15rpx;
    font-size: 26rpx;
}
.vip_page .weShare{
    text-align: center;
    padding: 15rpx;
    border: 1px solid gold;
    border-radius: 15rpx;
    margin-top: 20rpx;
    color: gold;
    font-size: 32rpx;
}
/* VIP介绍页样式 end */

/* 分辨率在1200 到 1600 的样式 */
@media screen and (min-width: 1200px) and (max-width: 1600px) {
    #header .nav ul li{
        width: 8em;
    }
    #main .banzou-upload{
        min-width: 12%;
        font-size: 0.95em;
        padding: 0 0.7em;
    }
    /* 确保列表页搜索框、导航、列表对齐 */
    .banzou-list-search{
        width: 90%;
        left: 5%;
        box-sizing: border-box;
    }
    .banzou-list-navs{
        width: 100%;
        box-sizing: border-box;
        margin: 70px auto;
        margin-bottom: 0;
    }
    .banzou-bread-navs-div{
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
    }
    #main .list-banzou-nav{
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
    }
    #main .banzou-ul-album li{
        margin-left: 1%;
    }
    #main .banzou-ul-album li:nth-child(6n+1) {
        margin-left: 0%;
    }
    #main .banzou-ul-album li a{
        font-size: 22px;
    }
    
    #main .banzou-ul-album li a.noicon{
        line-height: 3.5em;

    }
    /* 1200-1600px 中屏：按钮横向排列，标题标签间距合理 */
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-button{
        right: 0.8em;                                     /* 按钮距右侧适中 */
        gap: 6px;                                         /* 按钮间距稍紧凑 */
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li{
        height: 8.2em;                                    /* 高度增加，给标题+标签留空间 */
        line-height: 8.2em;
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-img{
        width: 6.0em;                                     /* 播放卡稍大 */
        height: 6.0em;
        line-height: 6.0em;
        top: calc(50% - 3.0em);
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-img>i{
        font-size: 2.8em;
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-title{
        left: 6.8em;
        top: 1.3em;
        max-width: 55%;                                   /* 避免标题过长 */
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-info{
        margin-left: 6.8em;
        margin-top: 4.0em;                                /* 标签与标题拉开距离（4.0-1.3=2.7em） */
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-audio{
        visibility: hidden;
    }
}
/** 分辨率在1200 到 1600 的样式 end */

/* 分辨率在1200以下：变调按钮每行3个，共4行 */
@media screen and (max-width: 1200px) {
    .pitch-btn{
        min-width: calc(33.333% - 10px);  /* 每行3个按钮 */
        font-size: 14px;
        padding: 9px 10px;
    }
    .pitch-btn i{
        font-size: 13px;
    }
}

/* 分辨率在1000 到 1200 的样式 start */
@media screen and (min-width: 1000px) and (max-width: 1200px) {
    #header .nav ul li{
        width: 6em;
    }
    #main .huozhe-sarch{
        width: 80%;
    }
    #main .huozhe-sarch input{
        width: 80%;
    }
    #main .banzou-upload{
        min-width: 15%;
        font-size: 0.9em;
        padding: 0 0.6em;
    }
    /* 确保列表页搜索框、导航、列表对齐 */
    .banzou-list-search{
        width: 90%;
        left: 5%;
        box-sizing: border-box;
    }
    .banzou-list-navs{
        width: 100%;
        box-sizing: border-box;
        margin: 4em auto;
        margin-bottom: 0;
    }
    .banzou-bread-navs-div{
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
    }
    #main .list-banzou-nav{
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
    }
    #main,#footer {
        margin: 0 auto;
        padding-top: 4em
    }
    #main .banzou-ul-album li a.noicon{
        font-size: 2em;
        line-height :6.2em;
    }
    #main .banzou-ul-album li{
        width: 15%;
        height: 15%;
    }
    /* 1000-1200px：列表占满宽度，标题标签间距保持 */
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li{
        width: 100%;
        height: 8.0em;
        line-height: 8.0em;
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-img{
        width: 5.8em;
        height: 5.8em;
        line-height: 5.8em;
        top: calc(50% - 2.9em);
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-img>i{
        font-size: 2.6em;
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-title{
        left: 6.5em;
        top: 1.2em;
        max-width: 58%;
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-info{
        margin-left: 6.5em;
        margin-top: 3.8em;                     /* 标签与标题拉开（3.8-1.2=2.6em） */
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-button{
        right: 1.2em;
        gap: 6px;
    }
    /* 详情页样式 */
    .detail-banzou-content{
        width: 100%!important;
    }
    .banzou-detail .banzou-right{
        padding: 0;
    }
    /* 充值会页面 */
    #main .vip-info p span.vip_title{
        width: 40%;
    }
    
}
/* 分辨率小于1000的样式 start */

@media screen and (max-width: 1000px) {
    #main, #footer{
        width: 96%;
    }
    #header .head-content-box{
        width: 96%;
    }
    #header .nav,#header .weixin{
        display: none;        
    }
    #header .login{
        margin-right: -1.3em;
    }
    #header .login #banzouwu_regist{
        display: none;
    }
    #header .login span{
        font-size: 1em;
    }
    #header .nav.active{
        display: block;
        width: 50%;
        background-color: #337ab7;
        padding: 0;
        margin: 4em auto;
    }
    #header .nav.active ul li{
        width: 100%;
        margin: 0.2em auto;
    }
    #header .nav.active ul li.active{
        margin-top: 0;
    }
    #header .nav.active a{
        font-size: 1.5em;
    }
    #header .mobile{
        float: right;
        display: block;
        visibility: visible;
        margin-right: 0.2em;
    }
    #header .mobile>i{
        margin-right: 0.5em;
        font-size: 1.5em;
        color: #fff;
    }
    #main .index-search-box{
        width: 100%;
        margin: 0.5em auto;
        padding: 0.5em;
    }
    #main .huozhe-sarch{
        width: 100%;
    }
    #main .huozhe-sarch input{
        width: 75%;
    }
    #main .banzou-upload{
        width: 100%;
        margin: 0.8em 0 0 0;
        padding: 0.8em;
        font-size: 1em;
        justify-content: center;
    }
    #main .index-banzou-album{
        width: 100%;
        margin-top: 3.5em;
    }
    #main .hot_title a{
        font-size: 1.5em;
    }
    #main .banzou-ul-album li{
        width: 48%;
    }
    #main .banzou-ul-album li:nth-child(2n+1){
        margin-left: 0;
    }
    #main .index-banzou-nav{
        width: 100%;
    }
    #main .index-banzou-nav>p{
        font-size: 1.5em;
    }
    /* 小屏（≤1000px）：单列布局，按钮上下排列，标题标签间距合理 */
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li{
        width: 100%;
        height: 9.5em;                               /* 高度充足，给标题+标签+按钮留空间 */
        line-height: 9.5em;
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-img{
        width: 5.5em;
        height: 5.5em;
        line-height: 5.5em;
        top: calc(50% - 2.75em);
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-img>i{
        font-size: 2.4em;
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-audio{
        visibility: hidden;
    }
    /* 小屏：收藏/下载按钮上下排列 */
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-button{
        top: 50%;
        right: 0.8em;                                /* 靠右，留边距 */
        transform: translate(0, -50%);               /* 仅垂直居中 */
        display: flex;
        flex-direction: column;                      /* 上下排列 */
        align-items: center;
        gap: 10px;
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-button>button{
        margin-top: 0;
        display: inline-block;
        font-size: 14px;                             /* 小屏字号略小 */
        padding: 6px 12px;
    }
    /* 小屏：标题与标签间距充足（4.2-1.4=2.8em） */
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-title{
        top: 1.4em;
        left: 6.0em;
        max-width: 55%;                              /* 避免标题过长与按钮冲突 */
    }
    .banzou-list > ul.banzou-list-ul > li.banzou-list-li .banzou-info{
        margin-left: 6.2em;
        margin-top: 4.2em;                           /* 标签下移，与标题拉开距离 */
    }
    /* 列表样式 */
    .banzou-list-search>input{
        width: 75%;
        margin: 0.2em auto;
    }
    .banzou-list-search{
        width: 96%;
        margin: 0 auto;
        left: 2%;
    }
    .banzou-list-navs{
        width: 100%;
        margin-top: 4em;
        padding: 10px 12px;
        border-radius: 8px;
    }
    .banzou-bread-navs-div{
        width: 100%;
    }
    #main .list-banzou-nav{
        width: 100%;
    }
    .banzou-list-navs .banzou-qudiao-div, .banzou-yueqi-div{ margin: 4px 0; }
    .banzou-list-navs .banzou-qudiao-div>div, .banzou-yueqi-div>div{ flex:0 0 4em; font-size:14px; padding:6px 0; }
    .banzou-list-navs .banzou-qudiao-div ul.banzou-qudiao, .banzou-yueqi-div ul.banzou-qudiao{ gap:6px; }
    .banzou-list-navs .banzou-qudiao-div ul.banzou-qudiao li>a , .banzou-yueqi-div ul.banzou-qudiao li>a { padding:6px 10px; font-size:14px; }
    .banzou-list-navs ul::after {
        content: "";
        clear: both;
        display: table;
        width: 100%;
        height: 0;
    }
    .banzou-list-navs .banzou-qudiao-div ul.banzou-qudiao li, .banzou-yueqi-div ul.banzou-qudiao li{
        min-width: 2em;
    }
    .banzou-list-navs .banzou-qudiao-div ul.banzou-qudiao li>a, .banzou-yueqi-div ul.banzou-qudiao li>a{
        font-size: 1.2em;
    }
    /* 列表样式 end */
    
    /* 详情页样式 start */
    #main .detail-banzou-nav{
        width: 100%;                    /* 保持100%，继承父容器#main的96%，确保居中 */
    }
    #main .detail-banzou-content{
        width: 100%;                    /* 小屏也保持100%继承 */
    }
    #main.detail-banzou-content{
        padding-top: 0;
    }
    .banzou-bread-detail-navs-div{
        margin-top: 4em;
    }
    .banzou-detail .banzou-left{
        float: none;
        min-height: 7em;
    }
    .banzou-detail .jianpu{
        width: 100%;
    }
    .banzou-detail .banzou-left .banzou-play{
        width: 8em;
        height: 8em;
    }
    .banzou-detail .banzou-left .banzou-play>i{
        font-size: 3em;
    }
    .banzou-detail .banzou-right{
        width: 100%;
        float: none;
        padding: 0.5em;
        margin-top: 0.5em;
    }
    .banzou-right>h3{
        text-align: center;
    }
    .banzou-detail .banzou-right .banzou-right-button button:first-child{
        margin-left: 0;
    }
    .banzou-detail .banzou-right .banzou-right-button button{
        margin-left: 0;
    }
    .banzou-detail .banzou-right .banzou-right-button button:last-child{
        margin-left: 0;
        margin-top: 0.5em;
    }
    /* 小屏变调样式适配 */
    .banzou-change-pitch{
        padding: 1em;
        margin-top: 1em;
    }
    .change-pitch-header h4{
        font-size:1.1em;
    }
    .change-pitch-header .change-tip{
        font-size:0.85em;
    }
    .biandiao-tips{
        font-size: 0.8em;
        padding: 0.7em 0.9em;
        text-align: left;
    }
    .biandiao-tips-btn{
        padding: 3px 10px;
        font-size: 0.85em;
    }
    .pitch-group{
        gap:8px;
    }
    .pitch-btn{
        padding:8px 6px;
        font-size:13px;
        min-width: calc(33.333% - 8px);  /* 小屏继续保持每行3个 */
    }
    .pitch-btn i{
        font-size:12px;
    }
    .change-notice{
        font-size:0.8em;
        padding:0.6em 0.8em;
    }
    .btn-download-change{
        font-size:14px;
        padding:10px 20px;
    }
    /* 变调管理页面移动端适配 */
    .steps-container {
        padding: 20px 15px;
        margin: 20px auto;
    }
    .step-number {
        width: 38px;
        height: 38px;
        font-size: 16px;
        margin-bottom: 8px;
    }
    .step-title {
        font-size: 14px;
    }
    .step-desc {
        font-size: 12px;
    }
    .step-arrow {
        font-size: 14px;
        right: -25px;
        top: 14px;
    }
    .change-tips {
        padding: 15px;
        margin: 15px auto;
    }
    .tip-icon {
        font-size: 20px;
    }
    .tip-title {
        font-size: 14px;
    }
    .tip-text {
        font-size: 13px;
    }
    .upload-section {
        padding: 20px;
        margin: 15px auto;
    }
    .btn-upload {
        font-size: 16px;
        height: 50px;
        line-height: 50px;
    }
    .biandiao-section {
        padding: 15px;
        margin: 15px auto;
    }
    .biandiao-section .biandiao-tips {
        font-size: 13px;
        padding: 10px 12px;
    }
    .button-container button {
        font-size: 14px;
        padding: 10px 6px;
    }
    .myList {
        font-size: 18px;
        margin: 25px auto 12px;
    }
    .myScroll {
        padding: 12px;
    }
    .zhuanhuan-title {
        font-size: 14px;
    }
    .change_status {
        font-size: 12px;
        padding: 3px 10px;
    }
    .zhuanhuan-btn {
        font-size: 20px;
    }
    /* 充值会页面 */
    #main .vip-banzou{
        width: 100%;
    }
    #main .vip-info p span.vip_title{
        width: 40%;
    }
    #main .vip-banzou .vip-banner h1{
        margin: 0.2em;
        font-size: 1.5em;
    }
    #main .vip-banzou .vip-banner>p{
        font-size: 1em;
        margin: 0.2em;
    }
    #main .vip-banzou .vip-banner>p:last-child{
        color: #ff4400;
    }
    #main .vip-info>p{
        margin:0.2em;
        width: 95%;
    }
    #main .vip-info .buy-img,
    #main .vip-info .payment-qr{
        position: inherit;
        right: auto;
        top: auto;
        transform:none
    }

    #main .vip-info{
        margin: 0.2em auto;
        width: calc(100% - 0.4em);
    }
    #main .vip-banzou .table-container{
        margin: 0.2em;
    }
    .vip-banzou .need_buy{
        width: 80%;
    }
}

.uptop {
    padding: 15px;
    margin: 0 0 20px 0;
    font-size: 20px;
    background-color: whitesmoke;
    border-left: 4px solid #f57e42;
    box-sizing: border-box;
    box-shadow: 0 0 1px #d9d9d9
}


.required {
    color: #f00;
    padding: 0 4px
}

.copyright {
    overflow: hidden;
    padding: 10px 0;
    width: 100%;                    /* 改为100%，继承#footer的90%，避免二次缩小 */
    margin: 0 auto;
    background: transparent url(https://preview.banzouwu.com/images/qr_code/footer-line.png) repeat-x top center
}

.copyright p {
    font-size: 12px;
    margin: 3px 0
}

.copyright a {
    color: #555
}

.errors_404 {
    width: 100%
}

.errors_404 img {
    max-width: 100%;
    min-width: 100%
}

.errors_link {
    text-align: center;
    margin: 20px 0 100px 0
}

.errors_link a {
    margin: 0 20px
}

#titleBar {
    display: none
}

@media screen and (max-width:1024px) {
    
    body.header-visible #titleBar,body.header-visible #main {
        -webkit-transform: translateX(-23em);
        -moz-transform: translateX(-23em);
        transform: translateX(-23em);
        -ms-transform: translateX(-23em)
    }

    body.header-visible #header {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0);
        -ms-transform: translateX(0)
    }

    #header .nav ul li ul {
        margin-left: -1em;
        margin-top: .5em
    }
}


.single-dashang img {
    margin: 0 8%;
    max-width: 180px;
    max-height: 180px
}

.footer_search {
    width: 88%;
    margin: 0 auto;
    padding-top: 1em
}

/* 列表页筛选胶囊化（强覆盖，防缓存/旧规则残留） */
.banzou-list-navs .banzou-qudiao{ list-style:none; }
.banzou-list-navs .banzou-qudiao-div ul.banzou-qudiao,
.banzou-list-navs .banzou-yueqi-div ul.banzou-qudiao{ height:auto!important; line-height:normal!important; flex-wrap:wrap!important; gap:8px!important; }
.banzou-list-navs .banzou-qudiao-div ul.banzou-qudiao li,
.banzou-list-navs .banzou-yueqi-div ul.banzou-qudiao li{ width:auto!important; height:auto!important; line-height:normal!important; border:0!important; background:transparent!important; padding:0; margin:0; }
.banzou-list-navs .banzou-qudiao-div ul.banzou-qudiao li>a,
.banzou-list-navs .banzou-yueqi-div ul.banzou-qudiao li>a{ display:inline-block; padding:6px 12px; border-radius:999px; border:1px solid #d6e4f5; background:#edf3fa; color:#337ab7; font-size:16px; line-height:1!important; }
.banzou-list-navs .banzou-qudiao li>a:hover{ background:#e6effb; }
.banzou-list-navs .banzou-qudiao li.active>a{ background:#337ab7; color:#fff; border-color:#337ab7; }
@media screen and (max-width: 1000px){
  .banzou-list-navs .banzou-qudiao li>a{ padding:6px 10px; font-size:14px; }
}