@media screen and (min-width: 1024px) {
    .sub-banner{
        width: 100%;
        height: 32rem;
        color: #FFFFFF;
        position: fixed;
        top: 5.72rem;
        left: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #F4F6FF;
        z-index: -1;
    }
    .sub-banner .box{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .sub-banner .box .name{
        font-size: 5.14rem;
        color: #FFFFFF;
    }
    .sub-banner .box .search-bar{
        margin-top: 2.86rem;
        position: relative;
        width: 67.72rem;
        height: 9rem;
    }
    .sub-banner .box .search-bar .top{
        width: 100%;
        height: 7.36rem;
        background: rgba(0, 0, 0, .7);
        border-radius: 1.42rem;
        display: flex;
        padding: 1.42rem 2.86rem;
    }
    .sub-banner .box .search-bar .top .item{
        margin-left: 2.86rem;
        line-height: 1.28rem;
        font-size: 1.28rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
    }
    .sub-banner .box .search-bar .top .item:first-child{
        margin-left: 0;
    }
    .sub-banner .box .search-bar .top .item.action{
        font-weight: 700;
    }
    .sub-banner .box .search-bar .top .item.action::after {
        content: "";
        display: block;
        width: 2.14rem;
        height: 4px;
        background: #FFFFFF;
        border-radius: 2.14rem;
        margin-top: .72rem; /* 调整横线与文字之间的间距 */
    }
    .sub-banner .box .search-bar .bot{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 4.56rem;
        padding: 0 .72rem;
        background: rgba(255, 255, 255, .9);
        border-radius: 21.42rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .sub-banner .box .search-bar .bot .btn-icon{
        padding: 0 1.42rem;
        height: 3.56rem;
        text-align: center;
        color: #FFFFFF;
        background: #6785FD;
        border-radius: 2rem;
        font-size: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sub-banner .box .search-bar .bot .btn-icon img{
        width: 45%;
        display: none;
    }
    .sub-banner .box .search-bar .bot input{
        width: calc(100% - 12rem);
        height: 100%;
        background: transparent;
        border-radius: 21.42rem 0 0 21.42rem;
        padding: 0 1.14rem;
        font-size: 1.42rem;
        color: #333333;
    }
}

@media screen and (min-width: 350px) and (max-width: 999px) {
    .sub-banner{
        width: 100%;
        height: 40vh;
        color: #FFFFFF;
        position: fixed;
        top: 52px;
        left: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #F4F6FF;
        z-index: -1;
    }
    .sub-banner .box{
        width: 100%;
        height: 100%;
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .sub-banner .box .name{
        font-size: 36px;
        color: #FFFFFF;
    }
    .sub-banner .box .search-bar{
        margin-top: 24px;
        position: relative;
        width: 100%;
        height: 80px;
    }
    .sub-banner .box .search-bar .top{
        width: 100%;
        height: 80px;
        background: rgba(0, 0, 0, .7);
        border-radius: 8px;
        display: flex;
        padding: 8px 16px;
    }
    .sub-banner .box .search-bar .top .item{
        margin-left: 16px;
        line-height: 20px;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
    }
    .sub-banner .box .search-bar .top .item:first-child{
        margin-left: 0;
    }
    .sub-banner .box .search-bar .top .item.action{
        font-weight: 700;
    }
    .sub-banner .box .search-bar .top .item.action::after {
        content: "";
        display: block;
        width: 20px;
        height: 4px;
        background: #FFFFFF;
        border-radius: 4px;
        margin-top: 4px; /* 调整横线与文字之间的间距 */
    }
    .sub-banner .box .search-bar .bot{
        position: absolute;
        top: 48px;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 40px;
        background: rgba(255, 255, 255, .9);
        border-radius: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .sub-banner .box .search-bar .bot .btn-icon{
        padding: 0 14px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: #FFFFFF;
        background: #6785FD;
        border-radius: 3rem;
        margin-right: 4px;
        font-size: 16px;
    }
    .sub-banner .box .search-bar .bot .btn-icon span{
        display: none;
    }
    .sub-banner .box .search-bar .bot .btn-icon img{
        width: 28px;
    }
    .sub-banner .box .search-bar .bot input{
        width: calc(100% - 80px);
        height: 100%;
        background: transparent;
        border-radius: 16px 0 0 16px;
        padding: 0 8px;
        font-size: 14px;
        color: #333333;
    }
}