html, body{
    width: 100%; height: 100%; padding: 0; margin: 0; background: #000;
}
/* 页面横幅 */
.page-banner{
    width: 100%;
}
.page-banner img{
    width: 100%;
}
/* 首页图片容器 */
.one-image-container{
    width: 100%;
}
.one-image-container > img{
    width: 100%;
}
/* 首页产品分类 */
.category-container{

}
.category-image{
    padding: 40px 0 20px 0;
}
.category-image img{
    width: 100%;
}
.category-name-container{
    position: absolute; width: 100%; z-index: 10; padding: 8vw 10px; color: #fff; display: flex; justify-content: space-between; align-content: center; align-items: center; text-shadow: 2px 2px 2px black;
}
.category-name-container > .category-subname{
    font-size: 4.5vw;
}
.category-name-container > .category-name{
    font-size: 4.5vw;
}
.category-items{
    width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 4%;
}
.category-item{
    width: 48%; margin: 20px 0;
}
.category-item img{
    width: 100%;
}
.category-item-title-mask{
    position: absolute; width: 48%; z-index: 10; background-color: #000; height: 8.5vw; margin-top: -8.5vw; opacity: 0.4;
}
.category-item-title-container{
    position: absolute; width: 48%; z-index: 20; height: 8.5vw; margin-top: -8.5vw; color: #fff; font-size: 3vw; padding: 0px 5px; display: flex; justify-content: space-between; align-items: center; align-content: center;
}
.category-item-title-container img{
    height: 3vw; width: 13vw;
}
/* 产品详情页 */
.product-content{
    width: 100%;
}
.product-content img{
    width: 100%;
}
/* 背景音乐 */
.bg-music-container{
    width: 10vw; height: 10vw; position: fixed; top: 5vw; right: 5vw; z-index: 10; background-image: url("../images/bg_music_button.svg"); background-size: contain; background-repeat: no-repeat; cursor: pointer;
}
/* 旋转动画 */
@keyframes rotateAnimation {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
.bg-music-rotate{
    animation: rotateAnimation 3s linear infinite;
}

/* PC首页样式 */
.pc-home{
    width: 100%; height: 100%; background-color: #f3f3f3;
}
.pc-home-header{
    width: 100%; height: 52px; line-height: 52px; background-color: #dadada;
}
.switch-btn-wrapper{
    display: flex; align-items: center; justify-content: center;
}
.switch-btn-wrapper > div{
    padding: 0 10px; margin: 0 10px; color: #949fb0; cursor: pointer;
}
.switch-btn-wrapper > div.active{
    color: #fff;
}

.pc-wrap{
    width: 100%; height: calc(100% - 52px); display: flex; justify-content: center; align-items: center;
}
/* 手机版 */
.mobile-container{
    width: 320px; height: 580px; background-image: url("../images/mobile_container.svg"); background-size: 100% 100%; background-repeat: no-repeat; border-radius: 35px; box-shadow: 0 .1rem .6rem 0 rgba(0,0,0,.08); padding-top: 52px;
}
.mobile-title{
    color: #fff; width: 100%; text-align: center; font-size: 14px; height: 32px; line-height: 32px;
}
.mobile-iframe{
    width: 100%; padding: 0 8px; height: calc(100% - 65px);
}
.mobile-iframe > iframe{
    width: 100%; height: 100%; border: none;
}
/* 电脑版 */
.pc-container{
    width: 768px; height: 100%;
}
.pc-iframe{
    width: 100%; height: 100%;
}
.pc-iframe > iframe{
    width: 100%; height: 100%; border: none;
}