@charset "utf-8";
/* CSS Document */
/*所有类目*/
.recommended_products {background-color: #F3F3F3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 50px;}
.recommended_products .recommended_products_bg {width: 100%; height: 300px; background:url(../img/recommendedProducts/top-bg.png) no-repeat center / cover; text-align: center; color: #F3F3F3;}
.recommended_products .recommended_products_top {position: relative; width: calc(90% - 60px); height: 176px; margin-top: -90px; padding: 0 30px; border-radius: 10px;}
.recommended_products .recommended_products_middle {width: 90%; margin-top: 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; font-size: 18px; color: #000000;}
.recommended_products .recommended_products_middle .box {width: 46%; padding: 20px; border: 1px solid #f3f3f3; background-color: #ffffff; box-shadow: 0 2px 6px rgba(0,0,0,.2); border-radius: 20px; display: flex; flex-direction: column;}
.recommended_products .recommended_products_middle .box .title {font-weight: bolder; flex: 0 0 auto;}
/*.recommended_products .recommended_products_middle .box .content_box {display: flex; flex-direction: row; align-items: center; justify-content: space-between;}*/
/* 调整 minmax 最小值以适应更窄的屏幕，避免溢出 */
/*.recommended_products .recommended_products_middle .box .content_box {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;}*/
/* 固定展示数量为3列 */
.recommended_products .recommended_products_middle .box .content_box {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1 0 auto;}
.recommended_products .recommended_products_middle .box .content_box .content {margin-top: 5px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box;}
/*.recommended_products .recommended_products_middle .box .content_box .content img {width: 100px; height: 100px;}*/
.recommended_products .recommended_products_bottom {width: 90%; font-size: 16px; color: #000000; margin-top: 40px; padding: 20px; border: 1px solid #f3f3f3; background-color: #ffffff; box-shadow: 0 2px 6px rgba(0,0,0,.2); border-radius: 20px; box-sizing: border-box;}
.recommended_products .recommended_products_bottom .title {font-weight: bolder;}
/*.recommended_products .recommended_products_bottom .content_box {margin-top: 10px; display: flex; flex-direction: row; align-items: center; justify-content: space-between;}*/
/* 调整 minmax 最小值 */
/*.recommended_products .recommended_products_bottom .content_box {margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;}*/
/* 固定展示数量为6列 */
.recommended_products .recommended_products_bottom .content_box {margin-top: 10px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;}
.recommended_products .recommended_products_bottom .content_box .content {padding: 16px; border: 1px solid #f3f3f3; box-shadow: 0 2px 6px rgba(0,0,0,.2); background-color: #ffffff; border-radius: 5px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box;}
.recommended_products .content_box .content .content_top_data img {width: 100%; max-width: 100%; height: auto; aspect-ratio: 256/170; object-fit: contain; display: block; /* 关键：max-width: 100% 防止图片溢出; object-fit: contain 确保图片完整显示 */}
.recommended_products .content_box .content .content_top_data {font-size: 14px; font-weight: 600; color: #333333; cursor: pointer; flex: 0 0 auto;}
.recommended_products .content_box .content .content_middle_source {margin-top: 20px; flex: 1 0 auto;}
.recommended_products .content_box .content .content_middle_source .supplier {font-size: 14px; color: #666666;}
.recommended_products .content_box .content .content_middle_source .vip {font-size: 12px; color: #4073E7;}
.recommended_products .content_box .content .content_bottom_btn {width: 100%; margin-top: 10px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex: 0 0 auto;}
.recommended_products .content_box .content .content_bottom_btn .inquiry-btn {width: 48%; font-size: 14px; text-align: center; border: 1px solid #666666; border-radius: 50px; white-space: nowrap; padding: 2px 0;}
.recommended_products .content_box .content .content_bottom_btn .compare-btn {width: 48%; font-size: 14px; text-align: center; border: 1px solid #666666; border-radius: 50px; white-space: nowrap; padding: 2px 0;}

.recommended_products .clearfix{zoom:1;}
.recommended_products .my-swiper-container{position:relative;width: auto;height:100%;zoom:1;cursor:default;z-index:3;overflow: hidden;/* 超出的 slide 被隐藏 */}
/*.recommended_products .my-swiper-container .my-swiper-wrapper .swiper-slide-title {display: flex; align-items: flex-end; cursor: default;}*/
/*.recommended_products .my-swiper-container .my-swiper-wrapper .swiper-slide-title .my-swiper-title {width: 20px; font-size: 18px; font-weight: bolder; color: #000; margin-right: 30px;}*/
.recommended_products .my-swiper-container .my-swiper-wrapper .swiper-slide .my-swiper-title {width: 20px; font-size: 18px; font-weight: bolder; color: #000; margin-right: 8px;}
.recommended_products .my-swiper-container .my-swiper-wrapper .swiper-slide-visible img {vertical-align:middle;display:inline-block;position: absolute;top:0;left:50%;margin-left:0;}
.recommended_products .my-swiper-container .my-swiper-wrapper .swiper-slide-active {z-index:1;}
.recommended_products .my-swiper-container .my-swiper-wrapper .swiper-slide {width:100%;position:relative;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;flex-direction:row;}
.recommended_products .my-swiper-container .my-swiper-wrapper .swiper-slide .my-swiper-content {position:relative;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;flex-direction:column;}
.recommended_products .my-swiper-container .my-swiper-wrapper .swiper-slide .my-swiper-content a {position: relative;width: 100px; height: 100px; border-radius: 50%; text-align: center; display: flex; align-items: center; justify-content: center;overflow: hidden;}
.recommended_products .my-swiper-container .my-swiper-wrapper .swiper-slide .my-swiper-content a img {position: relative; top: 0; left: 0;width: 100%; height: 100%; object-fit: contain;}
.recommended_products .my-swiper-container .my-swiper-wrapper .swiper-slide .slide-title {font-size: 14px; color: #000000;margin-top: 5px;}
.recommended_products .my-swiper-container .my-swiper-wrapper .swiper-active-switch {background: #333;}
.recommended_products .recommended_products_top .arrow-left-category .arrow-left-icon {display: block;width: 40px;height: 100%;background:url(../img/arrows.png) no-repeat 5px 0;filter: grayscale(100%) brightness(0%);/* 把白色箭头变黑 */}
.recommended_products .recommended_products_top .arrow-right-category .arrow-right-icon {display: block;width: 40px;height: 100%;background:url(../img/arrows.png) no-repeat 5px -50px;filter: grayscale(100%) brightness(0%);/* 把白色箭头变黑 */}
.recommended_products .recommended_products_top .arrow-left-category {display: flex;justify-content: center; align-content: center;position: absolute;left:-30px;margin-left:auto;top: 50%;z-index: 10;margin-top: -25px;width: 50px;height: 50px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; background-color:#fff;filter:alpha(Opacity=100);-moz-opacity:1;opacity:1;}
.recommended_products .recommended_products_top .arrow-right-category {display: flex;justify-content: center; align-content: center;position: absolute;right:-30px;margin-right:auto;top: 50%;z-index: 10;margin-top: -25px;width: 50px;height: 50px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; background-color:#fff;filter:alpha(Opacity=100);-moz-opacity:1;opacity:1;}
.recommended_products .my-swiper-container:hover .arrow-left-category {filter:alpha(Opacity=100);-moz-opacity:1;opacity:1;}
.recommended_products .my-swiper-container:hover .arrow-right-category {filter:alpha(Opacity=100);-moz-opacity:1;opacity:1;}
.recommended_products .swiper-bg {position: relative;width: 100%;height: 100%;top: -50%;margin-top: -88px;z-index: 1;display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.recommended_products .swiper-bg .swiper-left-bg {position: relative;width: 100px;height: 100%;background:url(../img/recommendedProducts/swiper-left-bg.png) no-repeat center / auto 100%;margin-left: -30px;}
.recommended_products .swiper-bg .swiper-middle-bg {position: relative;width: calc(100% - 0px);height: calc(100% - 0px);background-color: #ffffff;margin-top: 0;}
.recommended_products .swiper-bg .swiper-right-bg {position: relative;width: 100px;height: 100%;background:url(../img/recommendedProducts/swiper-right-bg.png) no-repeat center / auto 100%;margin-right: -30px;}
.recommended_products .swiper-pagination-switch {display: inline-block;width: 10px;height: 10px;border-radius: 10px;background: #fff;box-shadow: 0px 1px 2px #555 inset;margin: 0 3px;cursor: pointer; opacity:0.8;}
.recommended_products .pagination-category {position: absolute;left:50%;margin-left:-26px;text-align: center;bottom:5px;width:1192px;}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}
@media (max-width: 1270px) {
    .recommended_products .content_box .content .content_bottom_btn a {width: 72px;}
}
@media (max-width: 1460px) {
    .recommended_products .recommended_products_top {width: calc(90% - 70px);}

    .recommended_products .my-swiper-container .my-swiper-wrapper .swiper-slide .my-swiper-title {margin-right: auto;}
    .recommended_products .swiper-bg .swiper-left-bg {margin-left: -35px;}
    .recommended_products .swiper-bg .swiper-right-bg {margin-right: -35px;}
}

/* 当屏幕宽度小于 1420px 时 */
@media (max-width: 1420px) {
    .recommended_products .recommended_products_bottom .content_box {
        grid-template-columns: repeat(3, 1fr); /* 改为3列 */
    }
    
    .recommended_products .recommended_products_middle .box {
        width: 100%; /* 宽度改为100%，使其占据整行 */
        margin-bottom: 20px; /* 增加底部间距 */
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .recommended_products .recommended_products_top {width: 95%; margin-top: -50px; height: auto; padding: 10px;}
    .recommended_products .recommended_products_middle {flex-direction: column;}
    .recommended_products .recommended_products_middle .box {width: 100%; margin-bottom: 20px; padding: 10px; box-sizing: border-box;}
    .recommended_products .recommended_products_middle .box .content_box {grid-template-columns: repeat(2, 1fr);} /* 手机端两列 */
    .recommended_products .recommended_products_bottom .content_box {grid-template-columns: repeat(2, 1fr);}
    .recommended_products .swiper-bg {display: none;} /* 移动端隐藏背景装饰 */
    .recommended_products .my-swiper-container .my-swiper-wrapper .swiper-slide .my-swiper-title {display: none;} /* 移动端简化标题 */
    .recommended_products .arrow-left-category, .recommended_products .arrow-right-category {display: none;} /* 移动端隐藏箭头，可改为滑动 */
    .recommended_products .content_box .content .content_bottom_btn {flex-direction: column; gap: 5px;}
    .recommended_products .content_box .content .content_bottom_btn .inquiry-btn,
    .recommended_products .content_box .content .content_bottom_btn .compare-btn {width: 100%;}
    .recommended_products .content_box .content .content_top_data img {height: auto;} /* 确保高度自动 */
}