html {
    zoom: 0.4;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

.page {
    margin: 0 auto;
    width: 40%;
}

body {
    font-size: 16px;
}

.main-content {
    background-color: #f4f5f7;
}
.header-quick {
    margin: .024rem .036rem;
    display: flex;
    justify-content: center;
}

.header-quick .header-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0 .032rem 0 .032rem;
}

.header-quick .header-box img {
    display: block;
    width: .116rem;
    height: .116rem;
}

.header-quick .header-box p {
    display: block;
    font-size: .024rem;
}


.midSearch-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: .040rem .016rem .024rem .028rem;
    background-color: #fff;
}

.input-box {
    width: .570rem;
    height: .066rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #f6f6f6;
}

.input-box img {
    padding: 0 .012rem;
    width: .042rem;
    height: .042rem;
}

.input-box input {
    width: .500rem;
    font-size: .024rem;
    outline: none;
    background-color: transparent;
}

.search-btn {
    margin-left: .010rem;
    width: .122rem;
    height: .066rem;
    line-height: .066rem;
    color: #fff;
    font-size: .024rem;
    font-weight: 700;
    background-color: #0187ea;
    border-radius: 10px;
}



.select-box {
    box-sizing: border-box;
    box-shadow: 0 0.01rem 0.02rem -0.02rem rgba(0, 0, 0, 0.5);
    width: 40%;
    position: fixed;
    z-index: 10;
    padding: .024rem .030rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
}

.select-title {
    display: flex;
    align-items: center;
}

.select-title img {
    width: .175rem;
    height: .036rem;
}

.select-input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: .008rem .012rem;
    width: .356rem;
    background-color: #f7f7f8;
    font-size: .024rem;
    border-radius: .050rem;
}

.select-input img {
    width: .040rem;
    height: .036rem;
}

.select-input input {
    font-size: .024rem;
    outline: none;
    background-color: transparent;
}

.home-icon {
    display: flex;
    align-items: center;
}

.home-icon img {
    width: .036rem;
    height: .036rem;
}

.pageImage {
    margin-bottom: .020rem;
    padding: .132rem .012rem .036rem .012rem;
    background-color: #fff;
    box-shadow: inset 0 .010rem .020rem -.020rem rgba(0, 0, 0, 0.7);
}

.pageImage img {
    width: 100%;
    height: .260rem;
    object-fit: cover;
    border-radius: .016rem;
    transform: rotate(0deg);
    overflow: hidden;
}

.dub-case {
    margin-bottom: .024rem;
    padding: .024rem .036rem .040rem .036rem;
    background-color: #fff;
}

.dub-title {
    margin-bottom: .030rem;
    color: #e7350d;
    font-size: .042rem;
    font-weight: 700;
}

.dub-item {
    margin-bottom: .030rem;
    height: .160rem;
    border: 1px solid transparent;
    border-radius: .016rem;
    box-shadow: 0 0 .006rem #a8a8a8;
    overflow: hidden;
}

.dub-image {
    float: left;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
    margin: 0 .018rem;
    width: .100rem;
    height: .100rem;
    border-radius: .050rem;
    overflow: hidden;
}

.dub-image img {
    width: .100rem;
    height: .100rem;
}

.dub-image .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .054rem;
    height: .054rem;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: .032rem;
}

.dub-image .play-icon img {
    position: absolute;
    width: .048rem;
    height: .048rem;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
}

.dub-text {
    float: left;
    margin-left: .050rem;
}

.dub-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .030rem 0 .026rem 0;
    height: .040rem;
    line-height: .040rem;
}

.dub-name span {
    font-size: .030rem;
    font-weight: 700;
}

.dub-name img {
    width: .070rem;
    height: .032rem;
    vertical-align: -15%;
    margin-left:.030rem;
}


.dub-info {
    padding: 0 .050rem 0 .018rem;
    color: #a8a8a8;
    font-size: .024rem;
}

.dub-select {
    float: right;
    margin: .048rem .020rem .050rem 0;
}

.dub-select p {
    padding: .012rem .024rem;
    border: 1px solid #f54119;
    border-radius: .040rem;
    color: #f54119;
    font-size: .024rem;
}

.poster {
    margin-bottom: .020rem;
    padding: .042rem .030rem;
    background-color: #fff;
}

.poster img {
    width: 100%;
    height: .240rem;
}

.bgm-case {
    margin-bottom: .030rem;
    padding: .040rem .036rem .026rem .036rem;
    background-color: #fff;
}

.bgm-case-title {
    margin-bottom: .030rem;
    color: #e7350d;
    font-size: .042rem;
    font-weight: 700;
}

.bgm-item {
    margin-bottom: .030rem;
    height: .160rem;
    border: 1px solid transparent;
    border-radius: .016rem;
    box-shadow: 0 0 .006rem #a8a8a8;
    overflow: hidden;
}

.bgm-image {
    float: left;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
    margin: 0 .018rem;
    width: .100rem;
    height: .100rem;
    border-radius: .050rem;
    overflow: hidden;
}

.bgm-image img {
    width: .100rem;
    height: .100rem;
}

.bgm-image .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .054rem;
    height: .054rem;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: .032rem;
}

.bgm-image .play-icon img {
    position: absolute;
    width: .048rem;
    height: .048rem;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
}

.bgm-text {
    margin-left: .050rem;
    float: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: .270rem;
    line-height: .160rem;
}

.bgm-text p {
    font-size: .030rem;
    font-weight: 700;
}

.bgm-text img {
    width: .070rem;
    height: .032rem;
}

.bgm-select {
    float: right;
    margin: .048rem .020rem .050rem 0;
}

.bgm-select p {
    padding: .012rem .024rem;
    border: 1px solid #f54119;
    border-radius: .040rem;
    color: #f54119;
    font-size: .024rem;
}

.bgm-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .008rem;
    width: 100%;
    height: .080rem;
    line-height: .080rem;
    border-radius: 5px;
    color: #fff;
    font-size: .036rem;
    background-image: linear-gradient(to top, #fc4f49, #ff672b);
}

.bgm-btn img {
    margin-left: .010rem;
    width: .028rem;
    height: .028rem;
}

.relevant {
    padding: .054rem 0 .054rem 0;
    background-color: #fff;
    font-weight: 700;
}

.relevant-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-image: url('/assets/images/relevant-border.png');
    background-size: .430rem .022rem;
    width: .430rem;
    height: .022rem;
    line-height: .022rem;
    text-align: center;
    color: #f44118;
}

.relevant-title img {
    width: .257rem;
    height: .030rem;
}

.relevant-box {
    margin-top: .070rem;
    padding: 0 .036rem 0 .036rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .020rem 0;
    font-size: .030rem;
}

.relevant-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: .324rem;
    height: .080rem;
}

.relevant-item-long {
    display: flex;
    justify-content: center;
    align-items: center;
    width: .670rem;
    height: .080rem;
}

.relevant-blue {
    border: 1px solid #a8d6e9;
    border-radius: .016rem;
    background-color: #eef9ff;
    color: #2d3b91;
}

.relevant-brown {
    border: 1px solid #fad0bf;
    border-radius: .016rem;
    background-color: #fdebe1;
    color: #8d3a2d;
}

.relevant-purple {
    border: 1px solid #ddc9fd;
    border-radius: .016rem;
    background-color: #f9f1fe;
    color: #5940ad;
}

.relevant-yellow {
    border: 1px solid #ffdbb9;
    border-radius: .016rem;
    background-color: #fef6eb;
    color: #bd692a;
}

.footer {
    background-color: #322e2e;
}

.footer-box {
    background-color: #322e2e;
}

.footer-line1 img {
    width: 100%;
    height: .176rem;
}

.footer-line2 {
    padding: .064rem .022rem .068rem .032rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-item {
    position: relative;
    display: flex;
    justify-content: center;
    height: .084rem;
    border-radius: .016rem;
    color: #ffffff;
}

.footer-item img {
    height: .086rem;
}

.footer-item p {
    position: absolute;
    top: 45%;
    font-size: .028rem;
}

.footer-line3 {
    height: .250rem;
    background-color: #fff;
}

.partner {
    padding: .028rem .066rem .040rem .066rem;
    display: flex;
    justify-content: space-between;
}

.partner img {
    width: .120rem;
    height: .034rem;
}
.copyright-notice {
    text-align: center;
    font-size: .014rem;
}

.copyright-notice p{
line-height: .028rem;    
    
}
.copyright-notice a{

color:#fd5344;   
    
}

.ringPlay-box {
    display: none;
}

.ringPlay-box .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 3;
}

.ringPlay-info {
    box-sizing: border-box;
    padding: 0 .036rem;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: .180rem;
    background-color: #fff;
    z-index: 12;
    transition: bottom 2s ease;
}

.ringPlay-image {
    position: relative;
    width: .100rem;
    height: .100rem;
    border-radius: .100rem;
    overflow: hidden;
}

.ringPlay-image img {
    width: .100rem;
    height: .100rem;
    border-radius: .100rem;
    transition: transform 0.5s linear;
}

.playing {
    animation: rotate 5s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.ringPlay-icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .100rem;
    height: .100rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: .100rem;
}

.ringPlay-icon img {
    position: absolute;
    width: .082rem;
    height: .082rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ringPause-icon {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .100rem;
    height: .100rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: .100rem;
}

.ringPause-icon img {
    position: absolute;
    width: .048rem;
    height: .048rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.info-body {
    margin-left: .024rem;
}

.line1 {
    display: flex;
    justify-content: space-between;
    width: .500rem;
}

.info-title {
    font-size: .030rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-btn {
    padding: .004rem .003rem;
    min-width: .084rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: .018rem;
    background-color: #000;
    border-radius: .010rem;
}

.line2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .032rem;
    height: .032rem;
    position: relative;
}

.aubox {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.auItem {
    width: .006rem;
    margin-right: .004rem;
    list-style: none;
    background-color: #fd5644;
    height: .020rem;
}

.au1 {
    animation: audio .5s linear .1s infinite alternate;
}

.au2 {
    animation: audio .5s linear .2s infinite alternate;
}

.au3 {
    animation: audio .5s linear .3s infinite alternate;
}

.au4 {
    animation: audio .5s linear .4s infinite alternate;
}

.au5 {
    animation: audio .5s linear .5s infinite alternate;
}

.au6 {
    animation: audio .5s linear .6s infinite alternate;
}

.au7 {
    animation: audio .5s linear .7s infinite alternate;
}

.au8 {
    animation: audio .5s linear .8s infinite alternate;
}

.au9 {
    animation: audio .5s linear .9s infinite alternate;
}

.au10 {
    animation: audio .5s linear 1s infinite alternate;
}

@keyframes audio {
    from {
        height: .002rem;
    }

    to {
        height: .024rem;
    }
}

.shareGuide {
    display: none;
}

.shareGuide .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10;
}

.share-box img {
    position: fixed;
    top: 2%;
    right: 13%;
    width: .220rem;
    height: .220rem;
    z-index: 11;
}

.share-info {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    color: #fff;
    z-index: 11;
}

.share-info span {
    text-align: center;
    width: 100%;
    font-size: .042rem;
}

.ringSelect-box {
    box-sizing: border-box;
    padding: 0 .024rem;
    position: fixed;
    left: 0;
    bottom: -.150rem;
    transform: translateY(15%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: .125rem;
    background-image: url('/assets/images/select-box.png');
    background-size: 100% .125rem;
    transition: bottom .5s ease;
}

.select-title {
    min-width: .150rem;
    font-size: .024rem;
    font-weight: 700;
}

.select-list {
    display: flex;
    justify-content: flex-start;
}

.select-item {
    max-width: .200rem;
    margin-right: .010rem;
    font-size: .024rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.select-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: .150rem;
    height: .050rem;
    color: #fff;
    font-size: .024rem;
    background-color: #ee3c0f;
    border-radius: .024rem;
}

.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    font-size: .052rem;
    color: #fff;
    padding: .040rem;
    border-radius: .032rem;
    display: none;
}

.kefu-window {
    display: none;
}

.kefu-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
    z-index: 11;
}

.kefu-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .580rem;
    height: .800rem;
    background-color: #fff;
    border-radius: .040rem;
    z-index: 20;
}

.kefu-title {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: .030rem;
    width: 100%;
    height: .140rem;
    color: #fff;
    background-image: url('/assets/images/kefuBox-title.png');
    background-size: 100%, 100%;
    overflow: hidden;
}

.kefu-title .line1 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .030rem;
    margin-bottom: .0182rem;
    letter-spacing:.006rem;
    font-weight: 600;
}

.kefu-title .line2 {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .018rem;
}

.kefu-info-list {
    margin: .040rem .024rem;
    padding: 0 .014rem;
    background-color: #fff;
    border-radius: .015rem;
    box-shadow: 0 0 .002rem 0 #bcbcbc;
}

.item1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: .100rem;
    border-bottom: 1px solid #e1e1e1;
}

.item1 .item-icon {
    width: .058rem;
    height: .044rem;
}

.item1 .item-num {
    font-size: .036rem;
}

.item1 .item-btn {
    padding: .008rem .016rem;
    color: #1aad17;
    font-size: .024rem;
    border: 1px solid #1aad17;
    border-radius: .100rem;
}

.item2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: .100rem;
    border-bottom: 1px solid #e1e1e1;
}

.item2 .item-icon {
    width: .050rem;
    height: .050rem;
}

.item2 .item-num {
    font-size: .036rem;
}

.item2 .item-btn {
    padding: .008rem .016rem;
    color: #d44c2e;
    font-size: .024rem;
    border: 1px solid #d44c2e;
    border-radius: .100rem;
}

.item3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: .240rem;
    font-size: .024rem;
}

.item3 img {
    width: .184rem;
    height: .184rem;
}

.item p {
    margin-top: .028rem;
    font-size: .024rem;
}

.kefu-note {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .024rem;
}

.kefu-partner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.kefu-partner img {
    margin: .032rem .028rem;
    width: .140rem;
    height: .036rem;
}

@media only screen and (max-width: 960px) {
    html {
        zoom: 1;
    }

    .page {
        width: 100%;
    }

    .select-box {
        width: 100%;
        padding: .024rem .030rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
    }

    .select-title {
        display: flex;
        align-items: center;
    }

    .select-title img {
        width: .175rem;
        height: .036rem;
    }

    .select-input {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: .008rem .012rem;
        width: .356rem;
        background-color: #f7f7f8;
        font-size: .024rem;
        border-radius: .050rem;
    }

    .select-input img {
        width: .040rem;
        height: .036rem;
    }

    .select-input input {
        font-size: .024rem;
        outline: none;
        background-color: transparent;
    }

    .home-icon {
        display: flex;
        align-items: center;
    }

    .home-icon img {
        width: .036rem;
        height: .036rem;
    }

    .pageImage {
        margin-bottom: .020rem;
        padding: .132rem .012rem .036rem .012rem;
        background-color: #fff;
        box-shadow: inset 0 .010rem .020rem -.020rem rgba(0, 0, 0, 0.7);
    }

    .pageImage img {
        width: 100%;
        height: .260rem;
        object-fit: cover;
        border-radius: .016rem;
        transform: rotate(0deg);
        overflow: hidden;
    }

    .dub-case {
        margin-bottom: .024rem;
        padding: .024rem .036rem .040rem .036rem;
        background-color: #fff;
    }

    .dub-title {
        margin-bottom: .030rem;
        color: #e7350d;
        font-size: .042rem;
        font-weight: 700;
    }

    .dub-item {
        margin-bottom: .030rem;
        height: .160rem;
        border: 1px solid transparent;
        border-radius: .016rem;
        box-shadow: 0 0 .006rem #a8a8a8;
        overflow: hidden;
    }

    .dub-image {
        float: left;
        position: relative;
        top: 50%;
        transform: translate(0, -50%);
        margin: 0 .018rem;
        width: .100rem;
        height: .100rem;
        border-radius: .050rem;
        overflow: hidden;
    }

    .dub-image img {
        width: .100rem;
        height: .100rem;
    }

    .dub-image .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: .054rem;
        height: .054rem;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: .032rem;
    }

    .dub-image .play-icon img {
        position: absolute;
        width: .048rem;
        height: .048rem;
        top: 50%;
        left: 55%;
        transform: translate(-50%, -50%);
    }


    .relevant {
        padding: .054rem 0 .054rem 0;
        background-color: #fff;
    }


    .partner {
        padding: .038rem .066rem .030rem .066rem;
        display: flex;
        justify-content: space-between;
    }


    .ringPlay-info {
        box-sizing: border-box;
        padding: 0 .036rem;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: .180rem;
        background-color: #fff;
        z-index: 12;
    }


    .ringSelect-box {
        box-sizing: border-box;
        padding: 0 .024rem;
        position: fixed;
        left: 0;
        bottom: -.150rem;
        transform: translateY(15%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: .125rem;
        background-image: url('/assets/images/select-box.png');
        transition: bottom .5s ease;
    }


    .toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        padding: .040rem;
        border-radius: .032rem;
        display: none;
    }


    .item3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: .240rem;
    }
}