body {
    font-family     : Arial, sans-serif;
    background-color: #f9f9f9;
    margin          : 0;
}

.container {
    margin                  : auto;
    display                 : flex;
    flex-direction          : column;
    background              : url('https://file.catdream.net/catdream/static/pc-bg.png') no-repeat;
    /* background           : url('./images/pc.png') no-repeat; */
    background-size         : 100% 100%;
    /* width                : 19.2rem; */
    height                  : 46.49rem;
    position                : relative;
}

.top {
    width          : 100%;
    display        : flex;
    height         : 11.29rem;
    justify-content: center;
    position       : relative;
}

.head {
    /* position    : fixed; */
    padding-top    : .2rem;
    /* top         : .2rem; */
    display        : flex;
    gap            : .72rem;
    padding-left   : 3.3rem;
    z-index        : 5;
}

.pay,
.head-title {
    position: relative;
    height  : .39rem;
    padding : 0 .5rem;
    display : flex;
}

.pay img,
.head-title img {
    height: .39rem;
    cursor: pointer;
}

.left-bracket {
    position           : absolute;
    left               : 0;
    top                : 50%;
    transform          : translateY(-50%);
    /* 左括号特有的样式 */
    width              : .38rem;
    height             : .26rem;
    background         : url('./images/pc/right.png');
    background-size    : 100% 100%;
    background-position: center;
    cursor             : pointer;
}

.right-bracket {
    position           : absolute;
    right              : 0;
    top                : 50%;
    transform          : translateY(-50%);
    /* 右括号特有的样式 */
    width              : .38rem;
    height             : .26rem;
    background         : url('./images/pc/left.png');
    background-size    : 100% 100%;
    background-position: center;
}


.top .title {
    position: absolute;
    right   : 1rem;
    top     : 2.5rem;
    width   : 9.3rem;
}

.top .title img {
    width : 100%;
    height: 100%;
}

.head-links {
    position    : absolute;
    bottom      : 2.6rem;
    left        : 50%;
    transform   : translateX(-50%);
    width       : 100%;
    text-align  : center;
    /* display  : flex; */
    /* gap      : .64rem; */
}

.head-links-apk {
    width        : 2.34rem;
    height       : auto;
    margin-bottom: .08rem;
    cursor       : pointer;
}

.head-links-ios {
    width        : 1.9rem;
    height       : auto;
    margin-bottom: .08rem;
    cursor       : pointer;
}

.go-pay {
    height: auto !important;
    width : 2.72rem !important;
    cursor: pointer;
}

.features {
    position       : relative;
    width          : 100%;
    height         : 8.5rem;
    position       : relative;
    padding-top    : 1.8rem;
    display        : flex;
    justify-content: center;
}

.feature-title {
    position : absolute;
    top      : 0.46rem;
    left     : 50%;
    transform: translateX(-50%);
    width    : 5.17rem;
}

.carousel-container {
    width          : 100%;
    max-width      : 900px;
    background     : rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius  : 20px;
    box-shadow     : 0 15px 35px rgba(0, 0, 0, 0.3);
    padding        : 0 30px;
    overflow       : hidden;
}

.carousel {
    width          : 100%;
    height         : 100%;
    position       : relative;
    border-radius  : 15px;
    overflow       : hidden;
    display        : flex;
    justify-content: center;
}

.slides-container {
    position       : relative;
    width          : 90%;
    height         : 100%;
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.slide {
    width              : 70%;
    position           : absolute;
    border-radius      : 12px;
    /* overflow        : hidden; */
    /* transition      : all 0.6s cubic-bezier(0.25, 1, 0.5, 1); */
    cursor             : pointer;
    display            : none;
}

.slide img {
    width     : 100%;
    transition: transform 0.5s ease;
}


.slide.left {
    left     : 0;
    z-index  : 1;
    transform: scale(0.7);
    display  : flex;
}

.slide.left::after,
.slide.right::after {
    content         : '';
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.slide.center {
    width      : 11rem;
    z-index    : 2;
    transform  : scale(1);
    transform  : translate(-50%, -50%);
    top        : 50%;
    left       : 50%;
    margin-left: .5rem;
    display    : flex;
}

.slide.right {
    right    : 0;
    z-index  : 1;
    transform: scale(0.7);
    display  : flex;
}

.pagination {
    display        : flex;
    justify-content: center;
    align-items    : center;
    gap            : 12px;
    position       : absolute;
    bottom         : .5rem;
    left           : 50%;
    transform      : translateX(-50%);
    z-index        : 3;
    ;
}

.dot {
    position     : relative;
    border-radius: 50%;
    cursor       : pointer;
    transition   : all 0.3s ease;
    width        : .17rem;
    height       : .17rem;
    opacity      : 0.5;
    background   : #72cfb3;
}

.dot-active {
    position           : absolute;
    top                : 50%;
    left               : 50%;
    transform          : translate(-50%, -50%);
    background         : white;
    width              : .21rem;
    height             : .21rem;
    background         : url('./images/pc/selected.png');
    background-size    : 100% 100%;
    background-position: center;
}

.navigation {
    display        : flex;
    justify-content: center;
    margin-top     : 20px;
    gap            : 20px;
}

.nav-btn {
    border-radius  : 50%;
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border         : transparent;
    height         : 1.13rem;
    width          : 1.19rem;
    position       : absolute;
}

.prev {
    left           : 15%;
    top            : 50%;
    transform      : translate(0, -50%);
    background     : url("./images/pc/arrow-left.png");
    background-size: 100% 100%;
    z-index        : 3;
}

.next {
    right          : 15%;
    top            : 50%;
    transform      : translate(0, -50%);
    background     : url("./images/pc/arrow-right.png");
    background-size: 100% 100%;
    z-index        : 3;
}

/* .swiper-slide */

.picture {
    position: relative;
    height  : 11rem;
    position: relative;
}

.picture-title {
    position : absolute;
    top      : 0.46rem;
    left     : 50%;
    transform: translateX(-50%);
    width    : 5.17rem;
}

.picture-content {
    margin      : auto;
    display     : flex;
    padding-top : 3rem;
    padding-left: 2.11rem;
    position    : relative;
}

.picture-content-left {
    display        : flex;
    flex-direction : column;
    height         : 6.42rem;
    justify-content: center;
    position       : relative;
}

.line {
    position : absolute;
    top      : 0;
    left     : 50%;
    transform: translateX(-50%);
    height   : 100% !important;
}

.people-avart {
    z-index: 2;
}

.people-avart img {
    height: 1.36rem;
    width : 1.36rem;
}

.picture-content-right {
    position: relative;
    width   : 11.6rem;
}

.p-broder {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 11.69rem;
    height  : 6.42rem;
}


.p {
    position : absolute;
    top      : -.5rem;
    right    : 0;
    transform: translate(35%);
    width    : 8.07rem;
}

.picture-content-right-bg {
    position: relative;
    width   : 100%;
    height  : 7.82rem;
}


.good-audio {
    position       : relative;
    padding-top    : 2.5rem;
    display        : flex;
    justify-content: center;
    height         : 11rem;
}

.feature-title {
    position : absolute;
    top      : 0.46rem;
    left     : 50%;
    transform: translateX(-50%);
    width    : 5.17rem;
}

.audio-content {
    background     : url('./images/pc/audion-border.png') no-repeat;
    height         : 8.13rem;
    width          : 16.85rem;
    background-size: cover;
    padding        : 1.4rem 2.15rem 1.3rem 1.55rem;
    box-sizing     : border-box;
}

.sss {
    height : 100%;
    width  : 100%;
    display: flex;
}

.audio-content-left {
    height        : 100%;
    display       : flex;
    gap           : .3rem;
    flex-direction: column;
    width         : .56rem;
}

.audio-content-left img {
    width : .56rem;
    height: 2.58rem;
    cursor: pointer;
}

.audio-content-right {
    display    : flex;
    flex-wrap  : wrap;
    gap        : .26em;
    margin-left: .4rem;
}

.warp-item {
    height        : 2.58rem;
    width         : 3.86rem;
    display       : flex;
    flex-direction: column;
    background    : #da793d;
    border        : .04rem solid #da793d;
    box-sizing    : border-box;
    position      : relative;
}

.warp-item-action {
    width          : 100%;
    position       : absolute;
    bottom         : 0;
    left           : .04rem;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    font-size      : .2rem;
    height         : .36rem;
    color          : #FCF9EB;
    font-weight    : 700;
}


.warp-item .warp-item-down {
    width       : 18px;
    height      : 18px;
    margin-right: .2rem;
    margin-top  : .05rem;
    cursor      : pointer;
}

.zb {
    width: 100%
}

.audio-bottom {
    position       : absolute;
    bottom         : 1.5rem;
    left           : 50%;
    transform      : translate(-50%);
    width          : 9.69rem;
    height         : 1.61rem;
    background     : url('./images/pc/bottom.png') no-repeat;
    background-size: cover;
    display        : flex;
    align-items    : center;
    gap            : .64rem;
    padding-top    : .65rem;
    box-sizing     : border-box;
    justify-content: end;
    padding-right  : .83rem;
}

.audio-bottom-left {
    display    : flex;
    gap        : .39rem;
    align-items: center;
    height     : 100%;
    /* 如果IOS加进来就删除 */
    width      : 50%;
}

.audio-bottom-left img {
    width : 2.24rem;
    height: .64rem;
    cursor: pointer;
}

.download {
    width : .94rem;
    height: .6rem;
    cursor: pointer;
}

.video-container {
    position: relative;
    display : inline-block;
}

.play-pause-btn {
    position        : absolute;
    top             : 45%;
    left            : 50%;
    transform       : translate(-50%, -50%);
    width           : .7rem;
    height          : .7rem;
    background-color: rgba(0, 0, 0, 0.7);
    color           : white;
    border          : none;
    border-radius   : 50%;
    cursor          : pointer;
    opacity         : 1;
    transition      : opacity 0.3s ease;
    display         : flex;
    justify-content : center;
    align-items     : center;
}

.play-pause-btn.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.play-pause-btn::before {
    content      : "";
    position     : absolute;
    top          : 50%;
    left         : 50%;
    transform    : translate(-40%, -50%);
    width        : 0;
    height       : 0;
    border-top   : 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left  : 20px solid white;
}

.video-container video[playing]+.play-pause-btn::before {
    width       : 6px;
    height      : 24px;
    border      : none;
    border-left : 6px solid white;
    border-right: 6px solid white;
    transform   : translate(-50%, -50%);
}

.footer {
    display         : flex;
    position        : absolute;
    bottom          : -2.09rem;
    left            : 0;
    width           : 100%;
    color           : #fff;
    font-size       : .20rem;
    text-align      : left;
    z-index         : 10;
    height          : 2.09rem;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    background-color: #BC7439;
    padding         : 0 .4rem;
    box-sizing      : border-box;
}

.footer img {
    flex        : 0 0 1rem;
    height      : 1rem;
    margin-right: .2rem;
}