body{background-color: #f5f5f5;}

.hero-section {
    background: var(--gradient-tech-1);
   
}
.hero-section::before {
background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='atom' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='50' cy='50' r='3' fill='%23ffffff' fill-opacity='0.2'/%3E%3Cellipse cx='50' cy='50' rx='30' ry='15' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.1' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='30' ry='15' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.1' transform='rotate(60 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='30' ry='15' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.1' transform='rotate(120 50 50)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23atom)'/%3E%3C/svg%3E");
}


.productdetail-card {
            margin: 0;
            background-color: white;
            border-radius: 15px;
            overflow: hidden;
            height: 450px;
            transition: transform 0.3s ease;
}
.productdetail-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
        }
        
.productdetail-card  .product-image {
           
            background-color: #f8f9fa;
            padding-left: 0;
            max-width: 100%;
            max-height: 100%;
            overflow: hidden;
              
        }
        
.productdetail-card .product-image img {
    	border-radius: 15px 0 0 15px;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        }
        
.productdetail-card   .product-image img:hover {
            transform: scale(1.05);
        }
 



 .square-1 { background-color: #E8E8E8; } /* 铝粉白 */
.square-2 { background-color: #D4D4D8; } /* 铝金属灰 */
.square-3 { background-color: #A1A1AA; } /* 氧化铝灰 */
.square-1 { background-color: #DC2626; } /* 赤铁矿红 */
.square-2 { background-color: #B91C1C; } /* 铁锈红 */
.square-3 { background-color: #991B1B; } /* 深铁红 */
.square-1 { background-color: #94A3B8; } /* 钛灰浅 */
.square-2 { background-color: #64748B; } /* 钛金属灰 */
.square-3 { background-color: #475569; } /* 氧化钛深灰 */
.square-1 { background-color: #FEF3C7; } /* 锌白 */
.square-2 { background-color: #FDE68A; } /* 锌黄 */
.square-3 { background-color: #FBBF24; } /* 氧化锌黄 */
 
 
.square-1 { background: linear-gradient(135deg, #94A3B8 0%, #7E8FA9 100%); color: white; }
.square-2 { background: linear-gradient(135deg, #64748B 0%, #556378 100%); color: white; }
.square-3 { background: linear-gradient(135deg, #475569 0%, #3A4659 100%); color: white; }

.square-4 { 
    background: linear-gradient(135deg, #B8C6DA 0%, #A0B0C8 100%); 
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}

.square-5 { 
    background: linear-gradient(135deg, #94A3B8 0%, #7E8FA9 100%); 
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
}

.square-6 { 
    background: linear-gradient(135deg, #64748B 0%, #556378 100%); 
    color: white;
    border: 1px solid rgba(255,255,255,0.15);
}

.square-7 { 
    background: linear-gradient(135deg, #475569 0%, #3A4659 100%); 
    color: white;
    border: 1px solid rgba(0,0,0,0.2);
}

 

.square-4,.square-5,.square-6,.square-7{height: 200px;}
.chooseus{padding: 0 15px;}
.metal-square {
            padding: 35px;
            border-radius: 15px;
            text-align: center;
            font-weight: 600;
            font-size: 1rem;
            min-height: 140px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            transition: all 0.3s ease;
            
            overflow: hidden;
            box-shadow: 
                0 4px 12px rgba(0,0,0,0.15),
                inset 0 1px 0 rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        /* 添加金属光泽效果 */
        .metal-square::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 30%;
            background: linear-gradient(180deg, 
                rgba(255,255,255,0.2) 0%, 
                rgba(255,255,255,0) 100%);
            border-radius: 8px 8px 0 0;
        }
        
        .metal-square:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 8px 25px rgba(0,0,0,0.25),
                inset 0 1px 0 rgba(255,255,255,0.3);
        }
        
#product-detail .banner{
    height: 400px;
    background-image: url("../img/productdetail-banner.jpg");


}
.pro-ban .le {
  width: 66%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 30rem;
}
.pro-ban .le .title {
  color: #FFF;
  font-size: 3.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  /* 120% */
  text-transform: uppercase;
}
.pro-ban .le .heads-p {
  color: #FFF;
  margin-top: 2rem;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  /* 187.5% */
}
.pro-ban .re {
  width: 27%;
}
.pro-ban .re img {
  /*height: 30rem;*/
  margin-top: 4rem ;
}
.bai-more a {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
}
.parameters-pro {
  background: #F0F7FB;
  padding: 7.5rem 0;
}
.parameters-pro .parameters-pro-con {
  margin-top: 4rem;
  color: #000;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  /* 444.444% */
}


.product-title {
  color: #333;
  font-size: 2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.1;
  padding-bottom: 1rem;
  text-transform: uppercase;
  position: relative;
  margin: 40px 0;
}
.product-title::after {
  content: '';
  position: absolute;
  width: 3.875rem;
  height: 0.25rem;
  background: #475569;
  left: 0;
  bottom: 0;
}
/*参数设置*/
.compact-specs{
    text-align: center;
    font-size: 16px;
    line-height: 40px;
}
.compact-specs div{border-bottom: 1px #B8C6DA solid;}


.contact-cart {
            margin: 0;
            background-color: white;
            border-radius: 15px;
            overflow: hidden;
            height: 220px;
            transition: transform 0.3s ease;
}
.product-contact .contact-cart:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
        }
        
.product-contact  .contact-image {
           
            background-color: #f8f9fa;
            padding-left: 0;
            max-width: 100%;
              
        }
        
.product-contact  .contact-image img {
    	border-radius: 15px 0 0 15px;
        width: 400px;
        object-fit: contain;
        transition: transform 0.5s ease;
        }
        
.product-contact   .contact-image img:hover {
            transform: scale(1.05);
        }
.product-contact .contact-info{
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  justify-content: center; /* 子元素在垂直方向居中 */
  align-items: center; /* 左对齐，可以改为center水平居中 */
  
  height: 100%; /* 继承父元素高度 */
  min-height: 220px; /* 与contact-cart高度一致 */
  padding: 30px;
}



.pro-list{
  transition: .3s;}

.pro-info {
  background: #fff;
  padding: 30px 25px;
}
.pro-list:hover {
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.06);
}

.pro-img { 
    position: relative;
    overflow: hidden;
    height: 240px;
}
.pro-img img {
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: .3s;
}
.pro-img:hover img {
    transform: scale(1.1);
}
.pro-info {
    background: #fff;
    padding: 30px 25px;
}
.pro-tit {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.pro-tit a {
    font-size: 18px;
    color: #222;
}
.pro-tit a:hover {
    color: #f39800;
}
.pro-bot {
    font-size: 0;
    margin-top: 15px;
}
.pro-bot a {
    width: 88px;
    
    text-align: center;
    
    display: inline-block;
    font-size: 14px;
    color: #999;
    border: 1px solid #aaa;
    border-radius: 50px;
}
.pro-bot a:hover {
    border-color: #FBBF24;
    color: #fff;
    background: #FBBF24;
}
.pro-bot .sy {
    margin-right: 10px;
    border-color: #FBBF24;
    background: #FBBF24;
    color: #fff;
}
.pro-bot .sy:hover {
    background: #FBBF24;
}
.contact-cart .pro-bot a{width: 150px;font-size: 20px; line-height: 30px;}
.contact-cart .pro-bot i {margin-right: 15px;}