.page-header{
    color: #000;
    position: relative;
    overflow: hidden;
}

.header-back{
    height: 100vh;
    width: 200vh;
    position: absolute;
    left: calc((100% - 200vh) / 2);
    object-position: center bottom;
}

.header-back img,
.header-back picture{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-back .sound-wave{
    position: absolute;
    width: calc(900vh / 10.8);
    /* height: calc(400vh / 10.8); */
    height: calc(150vh / 10.8);

    /*
    *310px at 950
    *200px at 610
    */

    top: 31.6%;

    z-index: 210;

    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: .4;
}

/* .header-back .sound-wave.left{
    left: 0;
    transform: translateX(-25%);
    align-items: flex-end;
    -webkit-mask-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 1) 100%);
} */

.header-back .sound-wave.left{
    left: 50%;
    transform: translateX(-50%);
    align-items: flex-end;
    -webkit-mask-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .9) 12%, rgba(255, 255, 255, .9) 100%);
}

.header-back .sound-wave.right{
    display: none;
    right: 0;
    transform: translateX(25%);
    align-items: flex-start;
    -webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 1) 100%);
}

.header-back .sound-wave canvas{
    display: block;
    width: 100% !important;
    height: 100% !important;
}


.page-header .wrapper{
    align-items: center;
    text-align: center;
    padding-top: calc(80 * var(--rpx));
}

.anchor-nav .nav-item{
    width: auto;
    flex: 0 0 auto;
    padding-left: calc(60 * var(--rpx));
    padding-right: calc(60 * var(--rpx));
}

.anchor-nav .nav-icon{
    width: calc(50em / 20);
    height: calc(50em / 20);
    object-fit: contain;
    margin-right: calc(20em / 20);
}

section.main{
    background: linear-gradient(to bottom, #dce0e8 0%, #ffffff 100%) center top/0 calc(600 * var(--rpx)) no-repeat;
}

section.product-cate{
    border-bottom: 1px solid #dfe2e5;
}

section.product-cate .wrapper{
    padding-top: calc(60 * var(--rpx));
    padding-bottom: calc(100 * var(--rpx));
}

.cate-title{
    font-weight: bold;
    font-size: calc(38 * var(--rpx));
    color: #000;
    text-align: center;
    padding-top: calc(24em / 38);
    padding-bottom: calc(24em / 38);
    margin-bottom: calc(24em / 38);
}

.product-cate .product{
    display: flex;
    align-items: stretch;
    margin-bottom: calc(80 * var(--rpx));
}

.product-cate .product:nth-of-type(2n){
    flex-direction: row-reverse;
}

.product-cate .product:last-of-type{
    margin-bottom: 0;
}

.product .info{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: calc(65 * var(--rpx)) calc(56 * var(--rpx));
    background-color: #edeff4;
    width: calc(500 * var(--rpx));
}

.product .title{
    font-size: calc(38 * var(--rpx));
    line-height: calc(54em / 38);
    font-weight: bold;
}

.product .line{
    margin-top: calc(25 * var(--rpx));
    margin-bottom: calc(28 * var(--rpx));

    background: linear-gradient(to left, #ddbbc1 0%, #48c0ce 50%, #509bdf 100%);
    width: calc(40 * var(--rpx));
    height: 2px;
}

.product .keyword{
    font-weight: bold;
    font-size: calc(20rem / 16);
    line-height: calc(30em / 20);
    margin-bottom: calc(12em / 20);
}

.product .desc{
    /*font-weight: lighter;*/
    font-size: calc(20em / 16);
    line-height: calc(30em / 20);
}

.page-header .desc.mobile{
    display: none;
}

.product .desc1{
    font-weight: bold;
    font-size: calc(20em / 16);
    line-height: 1.5em;
    max-width: 85%;
}

.product .desc2{
    /*font-size: calc(20em / 16);*/
    line-height: 1.5em;
    margin-top: calc(20em / 20);
}

.product .info .btn-ctn{
    justify-content: flex-end;
    margin-top: auto;
    margin-bottom: 0;
}

.product .cover{
    flex: 0 0 auto;
    width: calc(100% - calc(500 * var(--rpx)));
}

.product .cover img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product.dark .info{
    color: #fff;
    background-color: #40474e;
}

.product.dark .btn-plus>*{
    color: #fff;
}

@media (max-width: 750px) {
    /*.header-back img, .header-back picture{
        object-fit: contain;
    }*/

    .header-back{
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .anchor-nav .nav-item{
        width: calc(100% / 2);
        padding-left: 0;
        padding-right: 0;
    }

    .anchor-nav .nav-icon{
        width: calc(36em / 20);
        height: calc(36em / 20);
        margin-right: calc(12em / 20);
    }

    .product-cate .product,
    .product-cate .product:nth-of-type(2n){
        display: flex;
        flex-direction: column-reverse;
    }

    .product .cover{
        width: 100%;
        height: auto;
    }

    .product .info{
        width: 100%;
        height: auto;
    }

    .product .info .btn-ctn{
        margin-top: calc(30 * var(--rpx));
    }

    .product .info{
        padding: calc(32 * var(--rpx)) calc(40 * var(--rpx));
    }

    section.product-cate .wrapper{
        padding-top: calc(40 * var(--rpx));
        padding-bottom: calc(60 * var(--rpx));
    }

    .page-header .title{
        margin-top: calc(120 * var(--rpx));
    }

    .sound-wave{
        display: none !important;
    }

    .page-header .desc.pc{
        display: none;
    }

    .page-header .desc.mobile{
        display: block;
    }

    .cate-title,.product .title{
        font-size: calc(32 * var(--rpx));
    }

    .anchor-nav .nav-item:nth-child(1){
        padding-right: calc(20rem / 16);
    }

    .anchor-nav .nav-item:nth-child(2){
        padding-left: calc(20rem / 16);
    }
}