﻿/* ===================== 新加产品详细左侧轮播 整体样式 ===================== */
/* 轮播容器整体样式 - 限制最大高度 */
.updatahottproductSwiper{
    max-height: 935px; /* 轮播容器最大高度，防止内容溢出 */
}

/* 产品卡片外层容器样式 */
.updatahottproduct_box{
    position: relative; /* 相对定位，作为子元素绝对定位的参考 */
    overflow: hidden; /* 隐藏超出容器的内容（如图片缩放时的溢出） */
    margin-bottom: 30px; /* 底部外边距，与下方元素拉开间距 */
    border: 1px solid #e5e5e5; /* 1px浅灰色边框，美化卡片 */
}

/* 产品图片容器样式 */
.hottproduct_img{
    position: relative; /* 相对定位，作为图片绝对定位的参考 */
    overflow: hidden; /* 隐藏图片缩放时超出容器的部分 */
    display: block; /* 转为块级元素，独占一行 */
    width: 100%; /* 宽度自适应父容器 */
    height: auto; /* 高度自动适应 */
    padding-top: 100%; /* 利用内边距实现1:1的正方形容器（宽高比） */
}

/* 产品图片样式 */
.hottproduct_img img{
    width: 100%; /* 图片宽度铺满容器 */
    height: auto; /* 高度自动，保持图片比例 */
    position: absolute; /* 绝对定位，脱离文档流 */
    top: 0; /* 顶部对齐容器 */
    left: 0; /* 左侧对齐容器 */
    vertical-align: middle; /* 垂直居中对齐 */
    /* 图片过渡动画：所有属性变化在0.35秒内完成，缓入缓出效果 */
    transition: all 0.35s ease-in-out; 
    -webkit-transition: all 0.35s ease-in-out; /* 兼容webkit内核浏览器（如Chrome/Safari） */
    -moz-transition: all 0.35s ease-in-out; /* 兼容Firefox */
    -ms-transition: all 0.35s ease-in-out; /* 兼容IE */
    -o-transition: all 0.35s ease-in-out; /* 兼容Opera */
}

/* 产品内容区域（标题/描述）样式 */
.hottproduct_content{
    padding: 20px; /* 内边距，让内容远离边框 */
}

/* 产品内容区域链接样式 */
.hottproduct_content a{
    font-size: 16px; /* 字体大小16px */
    color: #000; /* 字体颜色黑色 */
    word-wrap: break-word; /* 允许长单词换行 */
    word-break: break-all; /* 强制换行，即使是单词中间 */
    display: -webkit-box; /* 弹性盒模型（webkit内核） */
    -webkit-line-clamp: 1; /* 限制显示1行文字 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    overflow: hidden; /* 隐藏超出1行的文字（单行省略号效果） */
}

/* 产品内容区域标题样式 */
.hottproduct_content h3{
    font-size: 16px; /* 字体大小16px */
    color: #000; /* 字体颜色黑色 */
    word-wrap: break-word; /* 允许长单词换行 */
    word-break: break-all; /* 强制换行 */
    display: -webkit-box; /* 弹性盒模型 */
    -webkit-line-clamp: 1; /* 限制显示1行 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    overflow: hidden; /* 隐藏超出部分 */
    text-align: center; /* 文字居中对齐 */
}

/* 轮播下一页按钮样式（及RTL布局的上一页按钮） */
.updatahottproductSwiper .swiper-button-next,
.updatahottproductSwiper  .swiper-rtl .swiper-button-prev{
    bottom: 0; /* 按钮定位在底部 */
    top: auto; /* 取消顶部定位 */
    left: 50%; /* 水平居中（左移50%） */
    transform: translateX(-50%); /* 再左移自身50%，实现完全居中 */
    cursor: pointer; /* 鼠标悬浮显示手型，提示可点击 */
}

/* 轮播按钮（上一页/下一页）的文字/图标样式 */
.updatahottproductSwiper .swiper-button-next:after,
.updatahottproductSwiper .swiper-button-prev:after{
    transform: rotate(90deg); /* 按钮图标/文字旋转90度（竖向显示） */
    cursor: pointer; /* 手型光标 */
    padding:30px 15px; /* 按钮内边距，增大点击区域 */
    font-weight: bold; /* 字体加粗 */
    border-radius: 5px; /* 5px圆角，美化按钮 */
    display: inline-block; /* 行内块元素，可设置宽高/内边距 */
    font-size: 22px; /* 按钮文字/图标大小 */
    color: #000; /* 按钮文字颜色黑色 */
    text-align: center; /* 文字居中 */
    background-color: #f1f1f1; /* 按钮背景色浅灰色 */
    z-index: 9999; /* 提高层级，确保按钮在最上层不被遮挡 */
}

/* 轮播上一页按钮样式（及RTL布局的下一页按钮） */
.updatahottproductSwiper .swiper-button-prev,
.updatahottproductSwiper .swiper-rtl .swiper-button-next{
    top: 30px; /* 按钮定位在顶部30px处 */
    bottom: auto; /* 取消底部定位 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 完全居中 */
}

/* 轮播每个幻灯片的样式 */
.updatahottproductSwiper .swiper-slide{
    padding-top: 60px; /* 顶部内边距，给上一页按钮留出空间 */
}

/* 产品卡片 hover 效果：图片缩放 */
.updatahottproduct_box:hover .hottproduct_img img{
    transform: scale(1.2); /* 鼠标悬浮时图片放大1.2倍，营造动态效果 */
}

/* 轮播滚动动画：设置为线性过渡（匀速滚动），!important 强制覆盖默认样式 */
.updatahottproductSwiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* ===================== 响应式布局适配（不同屏幕宽度） ===================== */
/* 屏幕宽度≤340px：隐藏轮播 */
@media (max-width: 340px){
    .updatahottproductSwiper{display: none;}
}

/* 屏幕宽度≤576px（移动端）：隐藏轮播 */
@media (max-width: 576px) {
    .updatahottproductSwiper{display: none;}
}

/* 屏幕宽度577px~768px（平板小屏）：隐藏轮播 */
@media (min-width: 577px) and (max-width: 768px) {
    .updatahottproductSwiper{display: none;}
}

/* 屏幕宽度769px~992px（平板大屏）：隐藏轮播 */
@media (min-width: 769px) and (max-width: 992px) {
    .updatahottproductSwiper{display: none;}
}

/* 屏幕宽度993px~1219px（小屏电脑）：隐藏轮播 + 调整热门产品标题样式 */
@media (min-width: 993px) and (max-width: 1219px) {
    .updatahottproductSwiper{display: none;}
    .product_static_hot .newsboxtxt h3{
        line-height: normal !important; /* 行高恢复默认，!important 强制覆盖 */
        font-size: 14px !important; /* 标题字体缩小为14px */
    }
}

/* 屏幕宽度1200px~1329px：调整轮播最大高度 */
@media (min-width: 1200px) and (max-width: 1329px){
    .updatahottproductSwiper{max-height: 850px;}
}

/* 屏幕宽度1330px~1399px：调整轮播最大高度 */
@media (min-width: 1330px) and (max-width: 1399px){
    .updatahottproductSwiper{max-height: 880px;}
}

/* 屏幕宽度1400px~1440px：调整轮播最大高度 */
@media (min-width: 1400px) and (max-width: 1440px){
    .updatahottproductSwiper{max-height: 940px;}
}

/* 屏幕宽度1441px~1500px：无样式调整（预留） */
@media (min-width: 1441px) and (max-width: 1500px) {}

/* 屏幕宽度1501px~1680px：无样式调整（预留） */
@media (min-width: 1501px) and (max-width: 1680px) {}