﻿
.product-series{
	    height: 1270px;
}
    .tab-container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #ffffff;
     /* border: 2px solid #000000; */
      border-radius: 8px;
      padding: 10px 0;
      max-width: 1500px;
      margin: 0 auto 20px;
	      margin-top: 100px;
		      background-color: #E60012;
		      border-radius: 50px;
		      color: white;
			margin-bottom: 50px;
    }
    .tab-item {
      width: 25%;
      text-align: center;
      padding: 12px 0;
      font-size: 18px;
      font-weight: 500;
      color: #000000;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.3s ease;
	  color: white;
	  font-weight: 600;
	  white-space: nowrap;
	  font-size: 23px;
    }
    .tab-item.active {
      background-color: #FFFFFF;
          border-radius: 36px;
          margin-left: 10px;
		      color: #E60012;
		      font-weight: 600;
		      white-space: nowrap;
			      padding: 15px;
				      margin-right: 10px;
		font-size: 23px;
    }

    /* 内容区域 - 整体布局 */
    .content-section {
      display: none;
      max-width: 1500px;
      margin: 0 auto;
    }
    .content-section.active {
      display: block;
    }

    /* 蓝色框：产品展示区域（两个蓝框 - 图片+信息） */
    .product-wrapper {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
      flex-wrap: wrap;
	  margin-bottom: 100px;
    }
    .product-img-box {
      flex: 1;
      min-width: 300px;
      height: 700px;
      /* border: 3px solid white; 
      background-color: #ffffff; */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #333;
    }
	.product-img-box img{
	    max-height: 650px;
	}
    .product-info-box {
      flex: 1;
      min-width: 300px;
      height: 400px;
     /* border: 3px solid white; 
      background-color: #ffffff; */
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
	      padding-left: 0px;
    }
    .product-title {
      font-size: 55px;
      font-weight: bold;
      color: #000;
      margin-bottom: 20px;
      border-bottom: 1px solid #c5baba54;
      padding-bottom: 10px;
	  margin: 0;
	      padding-top: 0;
    }
	.product-title span{
	  font-size: 55px;
		  color: crimson;
		  margin-right: 15px;
	}
	.product-titlexia {
	  font-size: 38px;
	  font-weight: bold;
	  color: #000;
	 /* margin-bottom: 20px;
	  border-bottom: 2px solid #eee;
	  padding-bottom: 10px; */
	}
    .product-desc {
      font-size: 16px;
      color: #666;
      line-height: 2;
      margin-bottom: 10px;
	   display: -webkit-box;
	              -webkit-box-align: center;
    }

	.product-desc img{
	   display: -webkit-box;
	              -webkit-box-pack:center;
	              -webkit-box-align: center;
		
	}
    /* 箭头按钮组 - 居中布局 */
    .arrow-btn-group {
      text-align: center;
      margin: 20px 0;
	     max-width: 620px;
	     float: left;
	     margin-left: 47.5%;
		  margin-top: -330px;
    }
    .arrow-btn {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: none;
      background-color: #f53443;
      color: #ffffff;
      font-size: 24px;
      cursor: pointer;
      margin: 0 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s ease;
    }
    .arrow-btn:hover {
      background-color: #E60012;
    }

    /* 绿色框：产品切换按钮组 - 严格复刻样式 */
    .product-switch-group {
      display: flex;
      gap: 15px;
      justify-content: left;
      flex-wrap: inherit;
      padding: 20px;
      border-radius: 8px;
      margin: 0 auto;
	      float: right;
		  margin-top: -275px;
	    float: left;
	    margin-left: 47.5%;
		    overflow-x: auto;
		    width: 900px;
    }
	
	
	
	
	/* 水平滚动条样式 */
	.product-switch-group::-webkit-scrollbar {
	  height: 5px;
	}
	
	.product-switch-group::-webkit-scrollbar-track {
	  background: #E60012;
	  border-radius: 5px;
	  margin: 0 20px;
	}
	
	.product-switch-group::-webkit-scrollbar-thumb {
	  background: #E60012;
	  border-radius: 5px;
	  border: 2px solid transparent;
	  background-clip: content-box;
	}
	
	.product-switch-group::-webkit-scrollbar-thumb:hover {
	  background: #cb0414;
	}
	
	.product-switch-group::-webkit-scrollbar-button {
		width: 0px;	
	  background: rgba(0,0,0,0.1);
	  }
	/* 隐藏两端箭头按钮 */
	.product-switch-group::-webkit-scrollbar-button:single-button {
	  background: transparent;
	  width: 0;
	}
	
	
	
	
	
	
	
    .product-switch-btn {
      padding: 12px 13px;
      border: 2px solid white;
      border-radius: 90px;
      background-color:white;
      color: black;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
	  line-height: 110px;
	      height: 130px;
	      display: inherit;
	    -webkit-box-pack: center;
	    -webkit-box-align: center;
		border: 1px solid rgba(230,0,18,0.42);
		font-weight: 600;
		/*min-width: 209px;*/
    }
	.product-switch-btn span{
		 width: 100px; 
		    font-size: 15px;
		    color: black;
		        z-index: 999999;
    
		}
    .product-switch-btn.active {
      background-color:#E60012;
      color: #ffffff;
      border-color: #E60012;
      outline: 2px solid #E60012;
	  line-height: 130px;
	      height: 130px;
	      display: inherit;
	    -webkit-box-pack: center;
	    -webkit-box-align: center;
    }
    .product-switch-btn.active span{
		color: white;
		line-height: 110px;
		}
	.product-switch-btn img{
		/*margin-left: 90px;*/
    width: 120px;
    height: 90px;
    margin-top: 5px;
		 
	}
	.product-switch-btn.active img{
		  /*margin-left: 90px;*/
    width: 120px;
    height: 90px;
    margin-top: 5px;
	}

    /* 响应式适配 - 移动端兼容 */
    @media (max-width: 768px) {
		.tab-container {
		    display: flex;
		    justify-content: space-around;
		    align-items: center;
		    background-color: #ffffff;
		    /* border: 2px solid #000000; */
		    border-radius: 8px;
		    padding: 10px 0;
		    max-width: 1500px;
		    margin: 0 auto 20px;
		    margin-top: 40px;
		    background-color: #E60012;
		    border-radius: 50px;
		    color: white;
		    margin-bottom: 0px;
		    overflow-x: auto;
		}
      .tab-item {
        font-size: 11px;
            padding: 8px 0;
            width: 100%;
            margin-left: 0px;
			white-space: break-spaces;
			    min-width: 23%;
      }
	  .tab-item.active{
		  font-size: 14px;
		      padding: 8px 0;
		      width: 100%;
		      margin-left: 10px;
		  	white-space: break-spaces;
	  }
	  .product-img-box img {
	      max-height: 270px;
	      height: 270px;
	  }
	  .arrow-btn-group {
	      text-align: center;
	      margin: 20px 0;
	      max-width: 620px;
	      float: left;
	      margin-left: 0;
	      margin-top: -630px;
	      z-index: 99;
	      position: absolute;
		  width: 100%;
	  }
	  
	  .prev-btn {
	      width: 40px;
	      height: 40px;
	      font-size: 20px;
	      margin-right: 30%;
	  }
	  .next-btn {
	      width: 40px;
	      height: 40px;
	      font-size: 20px;
	      margin-left: 30%;
	  }
	  
	  .product-series {
	      height: 850px;
	  }
	  
	  
	  
	  
      .product-img-box, .product-info-box {
        min-width: 100%;
        height: 300px;
		    padding-top: 10px;
      }
      .product-title {
          font-size: 22px;
          width: 100%;
             text-align: center;
			     max-width: 100%
      }
	  .product-title span {
	      font-size: 23px;
	      color: crimson;
	      margin-right: 15px;
		  
	  }
	  .product-titlexia {
	      font-size: 18px;
	      font-weight: bold;
	      color: #000;
	         text-align: center;
	  }
	  .product-desc {
	      font-size: 11px;
	      color: #666;
	      margin-bottom: 5px;
	      text-align: center;
		  display: block;
		      line-height: 1.3;
	  }
	  .product-desc img{
		  display: none;
	  }
      .arrow-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
      }

	  .product-switch-group {
	      display: flex;
	      gap: 15px;
	      justify-content: left;
	      flex-wrap: inherit;
	      padding: 20px;
	      border-radius: 8px;
	      margin: 0 auto;
	      float: right;
	      margin-top: -255px;
	      float: left;
	      margin-left: 0;
	      overflow-x: auto;
	      width: 90%;
	  }
	  .product-switch-btn {
	      padding: 8px 16px;
	      font-size: 14px;
	      padding: 12px 13px;
	      border: 2px solid white;
	      border-radius: 90px;
	      background-color: white;
	      color: black;
	      font-size: 11px;
	      cursor: pointer;
	      transition: all 0.3s ease;
	      line-height: 50px;
	      height: 70px;
	      display: inherit;
	      -webkit-box-pack: center;
	      -webkit-box-align: center;
	      border: 1px solid rgba(230,0,18,0.42);
	      font-weight: 100;
	            min-width: 140px; 
	          z-index: 100;
	          width: 30%;
			  
	  }
	  
	  .product-switch-btn span {
	          font-size: 11px;
	          min-width: 70px;
	          float: left;
	          display: -webkit-box;
	  }
	  .product-switch-btn img {
	      margin-left: 0px;
	      width: 40px;
	      height: 40px;
	  }
	  .product-switch-btn.active {
	      background-color: #E60012;
	      color: #ffffff;
	      border-color: #E60012;
	      outline: 2px solid #E60012;
	      line-height: 50px;
	      height: 70px;
	      display: inherit;
	      -webkit-box-pack: center;
	      -webkit-box-align: center;
	  }
	  .product-switch-btn.active span {
	      color: white;
	      line-height: 50px;
	  }
	  .product-switch-btn.active img {
	      margin-left: 10px;
	      width: 40px;
	      height: 40px;
	  }
	  
	  
	  
	  
	  
	  
	  
    }