@keyframes mymove {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.cur {
  color: var(--dataColor) !important;
}

#product,
#productView .box {
  padding-top: 0;
}

#product .product_search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3%;
}

#product .top {
  margin: 60px 0;
  color: #fff;
}

#product .top h2 {
  font-size: var(--title);
}

#product .top h2::after {
  content: "_";
  display: block;
}

#product .top span {
  font-size: var(--subTitle);
  display: block;
  margin-top: 20px;
}

#product .navigation {
  display: flex;
}

#product .navigation a {
  font-size: 14px;
  color: #B7B7B7;
  width: 60px;
  display: inline-block;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 30px;
}

#product .navigation a:first-child {
  margin-left: 0;
}

#product .navigation a span {
  font-size: 10px;
}

#product .list {
  /* margin-top: 20px; */
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}



#product .list .item {
  text-align: center;
  width: calc(33.33% - 20px);
  padding: 55px 10px 0px;
  box-sizing: border-box;
  margin: 10px;
  background-color: #fff;
}

#product .list .item .slide {
  padding-bottom: 60% !important;
}

#product .list .item .title {
  color: #333;
  margin-top: 60px;
  display: block;
}

#product .list .item .product_img img {
  width: 100%;
}

#productView {
  background-color: rgba(250, 250, 250, 1);
}

#productView .top {
  text-align: center;
  font-size: 12px;
  color: #666;
}

#productView .top a {
  color: #666;
}

#productView .list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 60px;
  background: #fff;
}

#productView .list .left {
  width: calc(50% - 10px);
  background-color: #fff;
  padding: 50px;
  box-sizing: border-box;
}

#productView .list .left .border {
  border: 1px solid #ddd;
  /* height: 688px; */
}

#productView .list .left .swiper-product {
  position: static;
  /* margin-top: 20px; */
}

#productView .swiper-product .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#productView .swiper-product2 .swiper-slide img {
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
}

#productView .list .left .swiper-product .swiper-pagination-bullet {
  width: 60px;
  height: 50px;
  object-fit: cover;
  border-radius: 0;
}

#productView .list .right {
  padding: 50px;
  box-sizing: border-box;
  width: calc(50% - 10px);
  background-color: #fff;
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
}

#productView .list .right b {
  color: #54595F;
  font-size: var(--title);
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f6f6f6;
}
#productView .list .right .parameter{
    display: flex;
    flex-wrap: wrap;
}
#productView .list .right .parameter p{
   width: 50%;
}
#productView .list .bottom .home-title p {
  color: #7A7A7A;
}

#productView .bottom {
  margin-top: 20px;
  background-color: #fff;
  padding: 50px;
  box-sizing: border-box;
  font-size: 14px;
  color: #54595F;
}

#productView .box .bottom .home-title img {
  width: 100%;
}

#product .list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#product .list .item {
  width: calc(25% - 10px);
  height: 50%;
  margin: 0 5px 10px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 10%);
  /*margin-bottom: 20px;*/
  text-align: center;
  line-height: 3;
  border: 2px solid #d6d5d5;
}

#product .list .item .product_title {
  font-size: 18px;
  margin: 10px 0;
  color: #888;
}

#product .list .item .image {
  position: relative;
}

#product .product-son2 {
  background-color: #ffffff;
}

#product .product-fl2 {
  width: 14vw;
}

#product .series-list {
  border-bottom: 1px solid #fff;
  color: #444;
}

#product .product-p1 {
  padding: 10px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 20px;
  color: #FFFFFF;
  background: #999999;
  text-decoration: none;
  cursor: pointer;
}

#product .product-p1 .product-tb {
  display: none;
}

#product .product-p2 a {
  display: block;
  padding: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 17px;
  color: #666666;
  border-bottom: 3px solid #fff;
}
#product .product-p2 .active {
  color: #22458F;
  font-weight: 500;
}

.bicolor {
  background-color: #22458F !important;
}

.cur {
  transform: rotate(90deg);
  transition: 0.5s;
  color: #fff !important;
}

.block {
  display: block !important;
  background: #F5F5F5;
}

#product .search_input {
  flex: 0.8;
}

#product .search_input .search_main {
  position: relative;
}

#product .search_input .search_main .form-control {
  height: 40px;
  color: #999;
  box-sizing: border-box;
  line-height: 40px;
  font-size: 15px;
  width: 100%;
  padding-left: 17px;
  padding-right: 55px;
  border: 1px solid #e5e5e5;
  border-radius: 30px;
}

#product .search_input .search_main .search_btn {
  display: block;
  width: 40px;
  height: 33px;
  cursor: pointer;
  border: none;
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: #fff url(/template/default/pc/static/images/icontwo.png) no-repeat;
  background-position: -393px -452px;
  border-radius: 50%;
}

#product .toptext {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 24px;
  color: #22458F;
}

#product .list_flex {
  flex: 1;
}

@media screen and (max-width: 1168px) {
  #productView .swiper-product2 .swiper-slide img {
    width: 87px;
    height: 87px;
  }
}

@media screen and (max-width: 1000px) {
  #product .list .item {
    width: calc(33% - 10px);
    height: 50%;
  }

  #product .product-fl2 {
    width: 18vw;
  }
  #productView .swiper-product2 .swiper-slide img {
    width: 75px;
    height: 75px;
  }
}

@media screen and (max-width: 960px) {
  #productView .list .left {
    width: 100%;
  }

  #productView .list .right {
    width: 100%;
  }
  #productView .swiper-product2 .swiper-slide img {
    width: 100px;
    height: 100px;
  }

}
@media screen and (max-width: 770px) {
  #productView .swiper-product2 .swiper-slide img {
    width: 86px;
    height: 86px;
  }

}

@media screen and (max-width: 770px) {
  #product .list .item {
    width: calc(50% - 10px);
    height: 50%;
  }

  #product .product-fl2 {
    width: 25vw;
  }

}

@media screen and (max-width: 600px) {
   
  #product .top {
    margin: 20px 0;
  }
  #product .list .item {
    width: calc(52% - 21px);
  }

  #product .list .item .title {
    margin-top: 30px;
  }

  #productView .list {
    flex-direction: column;
    margin-top: 0;
  }

  #productView .list .left {
    width: 100%;
    padding: 20px;
  }

  #productView .list .right {
    width: 100%;
    padding: 20px;
  }

  #productView .bottom {
    padding: 20px;
  }

  #product .product_search {
    display: flex;
    flex-direction: column;
    align-items: normal;
    gap: 10px;
  }

  #product .toptext {
    font-size: 20px;
  }

  #product .product-fl2 {
    width: 100%;
    margin-bottom: 10px;
  }
  #productView .swiper-product2 .swiper-slide img {
    width: 70px;
    height: 70px;
  }
  #product .product-p1{
      padding: 5px 7px;
      font-size: 15px;
  }
  #product .product-p2 a{
      padding: 7px;
      font-size: 13px;
  }
}

/* ========== 以下是为图片表面标签新增的CSS样式 ========== */

/* 父容器 .image - 确保标签定位基准 */
#index_product .list .item .image {
    position: relative;  
    overflow: hidden;    
}

/* 标签容器 - 底部居中 */
#index_product .list .item .image .img-tags {
    position: absolute;   
    bottom: 20px;         
    left: 50%;            
    transform: translateX(-50%);  /* 水平居中关键 */
    z-index: 1;          
    display: flex;        
    flex-direction: column; 
    align-items: center;        /* 子元素居中对齐 */
    gap: 8px;                  
    width: 100%;               
    padding: 0 10px;           
    box-sizing: border-box;    
}

/* 二级栏目标签 - 金色圆矩形背景 + 黑色文字（宽度自适应） */
#index_product .list .item .image .tag-secondary {
    background: linear-gradient(135deg, #FFE0B4, #FFCA8C);  
    color: #1A1A1A;        
    padding: 6px 18px;     
    border-radius: 30px;   
    font-size: 20px;       
    font-weight: 500;     
    display: inline-block;  
    width: auto;               /* 自动宽度，根据内容撑开 */
    max-width: 90%;            /* 最长不超过90% */
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    white-space: normal;       
    word-break: break-word;    
    text-align: center;        
}

/* 三级栏目标签 - 白色文字，宽度根据字数自适应 */
#index_product .list .item .image .tag-tertiary {
    color: #FFFFFF;        
    padding: 6px 18px;     
    border-radius: 20px;   
    font-size: 15px;       
    display: inline-block;
    width: auto;               /* 自动宽度，每个框宽度不同 */
    max-width: 80%;            /* 最长不超过90%，超出换行 */
    white-space: normal;       
    word-break: break-word;    
    text-align: center;        
    box-sizing: border-box;
}

/* 鼠标悬停时二级标签效果 */
#index_product .list .item:hover .tag-secondary {
    transform: scale(1.02); 
    transition: 0.3s;     
}


/* 第2个卡片的三级标签 */
#index_product .list .item:nth-child(2) .tag-tertiary {
    width: auto !important;
    max-width: 340px !important;      
    min-width: 120px !important; 
    
}
#index_product .list .item:nth-child(3) .tag-secondary {
       margin-left: -70px ;  
    
}
/* 第3个卡片的三级标签 */
#index_product .list .item:nth-child(3) .tag-tertiary {
    width: auto ;
    /*max-width: 400px ;      */
    /*min-width: 120px ; */
    margin-left: -60px ;  
}

#index_product .list .item:nth-child(3) .img-tags {
    left: 57% ;                    /* 从50%改成55%，往右移 */
    transform: translateX(-50%) ;  /* 保持居中计算 */
}

@media screen and (max-width: 768px) {
    
    #index_product .list_product .item:nth-child(3) .tag-tertiary {
    max-width: 100px !important;   /* 改成你想要的宽度 */
    min-width: auto !important;
    margin-left: 2px !important;
    }

    #index_product .list_product .item:nth-child(2) .tag-tertiary{
         max-width: 100px !important;  
          min-width: auto !important;
          margin-left: 5px !important;
    }
    #index_product .list_product .item:nth-child(2) .img-tags {
    left: 53% !important;
    transform: translateX(-50%) !important;
    }
    /* 第3个卡片的标签容器位置归中 */
    #index_product .list_product .item:nth-child(3) .img-tags {
    left: 59% !important;
    transform: translateX(-50%) !important;
    }
}

@media screen and (max-width: 430px) {
     #product .list .item {
    width: calc(52% - 20px);
    margin: 6px;
    }
    #productView .swiper-product2 .swiper-slide img {
    width: 60px;
    height: 50px;
    }
}
@media screen and (max-width: 390px) {

  #productView .swiper-product2 .swiper-slide img {
    width: 60px;
    height: 50px;
  }
}




/* ========== 手机端轮播容器（PC端默认隐藏） ========== */
#index_product .mobile-product-swiper {
    display: none;
}

/* ========== 手机端样式（≤768px） ========== */
@media screen and (max-width: 768px) {
    
    /* 隐藏PC网格 */
    #index_product .list_product {
        display: none !important;
    }
    
    /* 显示手机轮播 */
    #index_product .mobile-product-swiper {
        display: block;
        width: 100%;
        overflow: hidden;
        padding-bottom: 50px;
        position: relative;
    }
    
    /* 轮播卡片 */
    #index_product .mobile-product-swiper .swiper-slide {
        height: auto;
    }
    
    #index_product .mobile-product-swiper .item {
        display: block;
        width: 100%;
    }
    
    /* ===== 图片容器（沿用PC端定位） ===== */
    #index_product .mobile-product-swiper .item .image {
        position: relative;
        overflow: hidden;
    }
    
    /* 图片 - 够大！ */
    #index_product .mobile-product-swiper .item .image img {
        width: 100%;
        height: 360px;       
        display: block;
        object-fit: cover;
    }
    
    /* ===== 标签容器（沿用PC端布局：底部居中、纵向排列、居中） ===== */
    #index_product .mobile-product-swiper .item .image .img-tags {
        position: absolute;
        bottom: 20px;         
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;              /* 可调整 */
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    /* ===== 二级标签（沿用PC端金色渐变背景 + 黑色文字） ===== */
    #index_product .mobile-product-swiper .item .image .tag-secondary {
        background: linear-gradient(135deg, #FFE0B4, #FFCA8C);
        color: #1A1A1A;
        padding: 6px 18px;     /* 可调整 */
        border-radius: 30px;
        font-size: 18px;       /* 可调整 */
        font-weight: 500;
        display: inline-block;
        width: auto;
        max-width: 90%;
        box-shadow: 0 6px 18px rgba(0,0,0,0.35);
        white-space: normal;
        word-break: break-word;
        text-align: center;
    }
    
    /* ===== 三级标签（沿用PC端白色文字） ===== */
    #index_product .mobile-product-swiper .item .image .tag-tertiary {
        color: #FFFFFF;
        padding: 5px 16px;     /* 可调整 */
        border-radius: 20px;
        font-size: 14px;       /* 可调整 */
        display: inline-block;
        width: auto;
        max-width: 85%;
        white-space: normal;
        word-break: break-word;
        text-align: center;
        box-sizing: border-box;
    }
    
    /* ===== 分页器小圆点 ===== */
    #index_product .mobile-pagination {
        bottom: 5px !important;
    }
    
    #index_product .mobile-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: #ccc;
        opacity: 0.6;
    }
    
    #index_product .mobile-pagination .swiper-pagination-bullet-active {
        background: #22458F;
        opacity: 1;
    }
    
    /* ===== 左右箭头 ===== */
    #index_product .mobile-next,
    #index_product .mobile-prev {
        width: 40px;
        height: 40px;
        background: transparent;
        border-radius: 50%;
       
    }
   
    #index_product .mobile-next::after,
    #index_product .mobile-prev::after {
        font-size: 18px;
        font-weight: bold;
         color: #333;
    }
    
    #index_product .mobile-next:hover,
    #index_product .mobile-prev:hover {
        background: rgba(34, 69, 143, 0.8);
    }
    
}

/* ========== 更小屏幕微调 ========== */
@media screen and (max-width: 480px) {
    #index_product .mobile-product-swiper .item .image img {
        height: 280px;      
    }
    
    #index_product .mobile-product-swiper .item .image .tag-secondary {
        font-size: 16px;     
        padding: 5px 14px;    
    }
    
    #index_product .mobile-product-swiper .item .image .tag-tertiary {
        font-size: 13px;      
        padding: 4px 12px;   
    }
    #index_product .mobile-product-swiper .slide-2 .tag-tertiary {
        text-align: center;    
        
        /*max-width: 300px !important;       */
    }
    
    /* 第3张卡片的三级标签 */
    #index_product .mobile-product-swiper .slide-3 .tag-tertiary {
       text-align: center;    
       
        /*max-width: 180px;      */
    }
     #index_product .mobile-product-swiper .slide-3 .tag-secondary {
        text-align: center;      
        margin-left: 11px;
    }
    
    
}

@media screen and (width: 360px) and (height: 740px) {
    #index_product .mobile-product-swiper .item .image img {
        
    }
    #index_product .mobile-product-swiper .slide-2 .item .image img {
        width: 100% !important;           /* 调宽度，100%是满宽 */
        margin: 0 auto !important;       /* 居中 */
        clip-path: polygon(0% 4%, 100% 4%, 100% 100%,0% 100%) !important;
        
    }
}