/* 首页 */

 body {
   background-color: var(--bg);
 }

 /* a:hover {
   color: var(--white);
 } */

 .mainBox0 {
   width: 1340px;
   margin: 0 auto;
   background-color: var(--bg);
   padding-bottom: 50px;

 }

 .footer {
   background-color: var(--bg2);
 }

 .footer2>div>div:nth-child(1) {
   color: var(--white);
 }

 .footer1Content>div {
   text-align: left;
 }

 .footer1Content>div:hover {
   color: var(--white);
 }

 .productCategory[data-select="true"] {
   color: var(--blue-deep);
   border-bottom: 1px solid;
 }


 .cardBox {
   /* width: 80vw; */
   margin: 20px auto;
   padding-top: 20px;
   display: flex;
   justify-content: space-between;
   gap: 24px;

 }

 .card {
   flex: 1;
   width: 300px;
   height: 138px;
   border-radius: 5px;
   color: var(--white);
   position: relative;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
   background-position: right bottom;
   background-repeat: no-repeat;
   background-size: cover;
   transition: transform 0.2s;
   margin-left: 10px;
 }

 .card h2{
  padding: 20px 0 0 20px;

 }
 .card p {
  padding: 10px 0 0 20px;

 }

 .card:hover {
   transform: translateY(-6px) scale(1.03);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
 }

 /* 分别设置每个卡片的背景图和主色 */
 .card1 {
   background: url('../../images/power/chanpinzhongxin.png') right bottom no-repeat;
   background-size: cover;
 }

 .card2 {
   background: url('../../images/power/chanpinxuanxing.png') right bottom no-repeat;
   background-size: cover;
 }

 .card3 {
   background: url('../../images/power/yangpinshenqing.png') right bottom no-repeat;
   background-size: cover;
 }

 .card4 {
   background: url('../../images/power/lianxiwomen.png') right bottom no-repeat;
   background-size: cover;
 }


 .news-section {
   display: flex;
   justify-content: space-between;
   gap: 32px;
   margin: 20px;
 }

 .title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
 }

 .title .wen {
   font-size: 26px;
 }

 .more-link {
   color: var(--text-color2);
   font-size: 14px;
   cursor: pointer;
 }

 .news-card {
   flex: 1;
   background: var(--white);
   border-radius: 24px;
   box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08);
   padding: 10px 0 10px 0;
   display: flex;
   flex-direction: column;
   width: 400px;
 }

 .news-card.blue {
   background: var(--myBlue);
   color: var(--white);
 }


 .news-card.blue2 {
   background: var(--bg4);
   color: var(--white);
 }



 .news-card h2 {
   font-size: 2rem;
   font-weight: bold;
   margin-bottom: 8px;
   margin-left: 32px;
 }



 .news-list {
   list-style: none;
   padding: 0 10px;
   margin: 0;
 }

 .news-list li {
   display: flex;
   align-items: center;
   padding: 5px;
   width: 370px;
   border-bottom: 1px solid #f0f0f0;
 }

 .news-card.blue .news-list li {
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
 }

 .news-list li:last-child {
   border-bottom: none;
 }

 .news-card.blue li:last-child {
   border-bottom: none;
 }


 .news-index {
   font-weight: bold;
   margin-right: 16px;
   width: 24px;
   text-align: right;
 }



 .news-card.blue .news-index {
   color: var(--white);
   opacity: 0.8;
 }

 .news-title {
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer;
 }

 .news-tagBox {
   width: 60px;
   text-align: center;
 }

 .news-tag {
   margin-left: 12px;
   font-size: 12px;
   padding: 2px 10px;
   border-radius: 3px;
   background: #ff4d4f;
   color: var(--white);
   font-weight: bold;


 }

 .news-tag.new {
   background: #ffb400;
   color: var(--white);

 }

 .news-tag.hot {
   background: #ff4d4f;
   color: var(--white);
 }



 /* 产品中心样式 */
 .productCenter {
   margin: 20px 0;
 }

 .productCenter h2 {
   text-align: left;
   font-size: 26px;
   margin: 10px 0;
   color: var(--text-color);
   font-weight: normal;
 }

 .productContainer {
   display: flex;
   margin: 0 auto;
   height: 392px;
 }


 .productBanner {
   width: 20%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: url('../../images/power/chakangengduo.png') center no-repeat;
   background-color: var(--myBlue);
 }

 .productBanner img {
   max-width: 80%;
   margin-bottom: 2rem;
 }

 .viewMore {
   display: inline-block;
   padding: 0.5rem 1.5rem;
   border: 2px solid var(--white);
   color: var(--white);
   border-radius: 20px;
   text-decoration: none;
   font-weight: bold;
 }

 .viewMore:hover {
   color: var(--white);
 }

 .productGrid {
   width: 80%;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   background: #fff;
 }

 .productItem {
   background-color: var(--white);
   padding: 1rem;
   border-bottom: 1px solid var(--line);
   border-right: 1px solid var(--line);
   height: 167px;
 }

 .noBottom {
   border-bottom: 1px solid transparent;
 }

 .productItem h3 {
   color: var(--myBlue);
   margin-bottom: 0.5rem;
   font-size: 1rem;
   cursor: pointer;
 }

 .myline {
   width: 20px;
   height: 2px;
   background-color: var(--text-color1);
   margin-bottom: 5px;
 }

 .productItem p {
   color: var(--text-color2);
   font-size: 0.85rem;
   min-height: 2.5em;
   max-width: 13vw;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .productImage {
   width: 55%;
   height: 55%;
   display: block;
   margin-left: 50%;
   object-fit: contain;
 }


 .topicBox {
   display: flex;
   gap: 20px;
   align-items: center;
   height: 426px;

 }

 .topic {
   width: 40%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 15px;
   height: 424px;
   /* border: 1px solid #f12424; */
 }

 .topic li {
   font-weight: 400;
   /* border-radius: 2px; */
   width: 250px;
   height: 130px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: var(--white);
   gap: 15px;
 }

 /* 默认图标 */
 .icon {
   width: 34px;
   height: 34px;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }


 .li1 .icon {
   background: url('../../images/power/gongyekongzhi_moren.png');
 }

 .li2 .icon {
   background: url('../../images/power/guojiadianwang-moren.png');
 }

 .li3 .icon {
   background: url('../../images/power/guidaojiaotong_moren.png');
 }

 .li4 .icon {
   background: url('../../images/power/wulianwang_moren.png');
 }

 .li5 .icon {
   background: url('../../images/power/qichedianzi_moren.png');
 }



 .topic li:hover,
 .topic .icon:hover {
   background-position: center;
   background-repeat: no-repeat;
   color: var(--white);
   background-size: cover;

 }

 /* 图标高亮 */
 .topic .li1:hover .icon {
   background-image: url('../../images/power/gongyekongzhi_gaoliang.png');
 }

 .topic .li2:hover .icon {
   background-image: url('../../images/power/guojiadianwang_gaoliang.png');
 }

 .topic .li3:hover .icon {
   background-image: url('../../images/power/guidaojiaotong_gaoliang.png');
 }

 .topic .li4:hover .icon {
   background-image: url('../../images/power/wulianwang_gaoliang.png');
 }

 .topic .li5:hover .icon {
   background-image: url('../../images/power/qichedianzi_gaoliang.png');
 }



 /* 背景图 */
 .topic .li1:hover {
   background-image: linear-gradient(rgba(14, 106, 242, 0.5), rgba(10, 88, 205, 0.8)), url('../../images/power/jiaodianzhuanti.png');
 }

 .topic .li2:hover {
   background-image: linear-gradient(rgba(14, 106, 242, 0.5), rgba(10, 88, 205, 0.8)), url('../../images/power/dianwang_bg.png');
 }

 .topic .li3:hover {
   background-image: linear-gradient(rgba(14, 106, 242, 0.5), rgba(10, 88, 205, 0.8)), url('../../images/power/guidao_bg.png');
 }

 .topic .li4:hover {
   background-image: linear-gradient(rgba(14, 106, 242, 0.5), rgba(10, 88, 205, 0.8)), url('../../images/power/wulianwang_bg.png');
 }

 .topic .li5:hover {
   background-image: linear-gradient(rgba(14, 106, 242, 0.5), rgba(10, 88, 205, 0.8)), url('../../images/power/qiche_bg.png');
 }


 .topic li:hover img {
   background-color: var(--white);
 }

 .topicImgBox {
   width: 60%;
   height: 426px;
   position: relative;

 }

 .topicImg {
   width: 100%;
   height: 426px;

 }

 .bg {
   width: 100%;
   position: absolute;
   bottom: 0px;
   display: flex;
   flex-direction: column;
   gap: 15px;
   background-color: var(--bg3);
   color: var(--white);
   font-size: 16px;
   padding: 15px 0;
   text-indent: 2rem;
   border-radius: 0 0 5px 5px;
 }



 .swiper-box {
   width: 100%;
   height: 518px;
   position: relative;
   overflow: hidden;
 }

 /* 轮播开始 */
 .swiper-container {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
 }

 .swiper-wrapper {
   width: 100%;
   height: 100%;
   position: relative;
   display: flex;
 }

 .swiper-slide {
   width: 100%;
   height: 100%;
   position: relative;
   flex-shrink: 0;
 }

 .swiper-slide>img {
   width: 100%;
   height: 100%;
   /* object-fit: contain; */
 }

 .pagination {
   position: absolute;
   z-index: 20;
   bottom: 10px;
   width: 100%;
   text-align: center;
 }

 .swiper-pagination-switch {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 8px;
   background: var(--text-color2);
   margin: 0 5px;
   opacity: 0.8;
   border: 1px solid var(--white);
   cursor: pointer;
 }

 .swiper-active-switch {
   background: var(--myBlue);
 }