.main-slider .main-slider-item {
    height: 450px;
}
.to-primary{
    --tw-gradient-to: color-mix(in oklab, var(--primary) 20%, transparent);
    

   }
.bg-gradient-to-r {
--tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.icon-product{
width: 15px;
height: 15px;
}
.xiebian{
transform: rotate(-45deg);
}
.left-1 {
left: calc(var(--spacing)* 1.5);
}
.bottom-1 {
bottom: calc(var(--spacing)* 1.5);
}
.sanjiao{
position: relative;
}
.sanjiao::before
{
content: '';
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 10px;
background: var(--primary);
clip-path: polygon(0 0, 100% 0, 0 100%);
opacity: 0;
transition:all .5s
}
.sanjiao::after
{
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 10px;
height: 10px;
background: var(--primary);
clip-path: polygon(100% 100%, 100% 0, 0 100%);
opacity: 0;
transition:all .5s
}
.group:hover.sanjiao::before,.group:hover.sanjiao::after{
opacity: 1;
}

.contact-icon{
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
.contact-info{
display: flex;
align-items: center;
justify-content: flex-start;
}
.mr-4 {
    margin-right: calc(var(--spacing) * 4)
}
@media (min-width: 64rem){    
.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 96rem){
.\32xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pl-20 {
    padding-left: calc(var(--spacing) * 20)
}
.pr-20 {
    padding-right: calc(var(--spacing) * 20)
}
.contact-green {
    color:#00ffaa;
}
.contact-green .contact-icon{
    border-color:#00ffaa;    
    background-color: color-mix(in oklab, #00ffaa 10%, transparent);
}

.contact-blue {
    color:#00b4ff;
}
.contact-blue .contact-icon{
    border-color:#00b4ff;   
    background-color: color-mix(in oklab, #00b4ff 10%, transparent); 
}
.contact-purple {
    color:#a03cff;
}
.contact-purple .contact-icon{
    border-color:#a03cff;    
    background-color: color-mix(in oklab, #a03cff 10%, transparent); 
}