@import "./common.less";

body {
	font: 16px;
	color: #000;
	.d-flex;

	.flex-column;
	min-height: 100vh;

	@media (max-width: 768px) {}
}

main {
	flex: 1;

}
header{
    position: absolute !important;
    white-space: nowarp;
    	.layui-nav .layui-nav-item{
    	    line-height: normal;
    	}
    	.layui-nav .layui-nav-item a{
	    font-size: var(--ft20);
	position: relative;
	white-space: nowrap;
	bottom: 0;
	transition: all 0.3s;
	    color: #000;
	    padding:0 var(--p20);
	   
	}
	.layui-nav .layui-this:after, .layui-nav-bar{
	    display: none;
	}
		.layui-nav .layui-nav-item a:hover{
		    bottom: 5px;
		}
	.layui-nav .layui-nav-item a:hover, .layui-nav .layui-this a{
	    color: var(--ftc);
	}
	transition: all 0.3s;

}
footer{
    background: var(--ftc);
    color: #fff;
    padding: var(--p70);
    .layui-main{
        gap: var(--p20);
        .d-flex;
        .al-fs;
        .jc-s;
    }
    .footerUl{
        gap: var(--p40);
        .d-flex;
        .flex-column;
    }
    .info{
        .d-grid;
        gap: var(--p20);
        width: 400px;
        max-width: 100%;
        li{
                .d-flex;
        .al-c;
        
        gap: var(--p10);
        .img_box{
            width: 20px;
            flex-shrink: 0;
        } 
        }
   
    }
    .qrcode{
        .d-flex;
        flex-wrap: wrap;
        gap: var(--p30);
    }
}
    h1{
        font-size: var(--ft32);
    }

.s_content{
    font-weight: bold;
    color: #000;
    text-align: justify;
}
.sotry{
    font-size: var(--ft18);
    .img_box{
    margin-top: var(--p40);
        border-radius: 20px;
        margin-bottom: var(--p30);
    }
}
.clicnts{
    padding: vaR(--p40) 0;
    font-size: var(--ft18);
    background: #F2F2F2;
    .layui-main{
        .d-grid;
        .grid2;
        gap: var(--p40);
    }
    h1{
        margin: var(--p30) 0 var(--p40);
    }
    .img{
        
        border-radius: 20px;
    }
}
.team{
    background: #E8ECF1;
    h1{
        margin-bottom: var(--p20);
    }
    hr{
        border-color:#000 ;
    }
    ul{
        margin: var(--p40) 0;
        .d-grid;
        .grid3;
        gap: var(--p30);
        .img{
            
        border-radius: 20px;
        }
    }
    font-size: var(--ft18);
    
}
.materials{
    ul{
        margin-top: var(--p100);
        .d-grid;
        .grid3;
        gap: var(--p25);
    }
    li{
        border-radius: 16px;overflow: hidden;
        transition: all 0.3s;
        &:nth-child(3n+3){
            position: relative;
            // bottom: 50px;
        }
        &:hover{
            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        }
        &:nth-child(6n+5){
            background:#FFECEC ;
        }
    }
    .card{
        background: #FBFCED;
        padding: var(--p40) var(--p35);
        h5{
            font-size: vaR(--ft20);
            margin-bottom: var(--p10);
            span{
                color: vaR(--ftc);
            }
        }
    }
}
  .index_swiper .swiper,
.top_img{
    height: 100vh;
}
.Products{
  
    background: #F5FBFF;
    hr{
        border-color: #000;
        margin: var(--p40) 0 var(--p80);
    }
}
.Product{
    h1{
        font-size: var(--ft50);
    }
}
.List {
    ul{
        margin-top: vaR(--p60);
    gap: var(--p40) var(--p30);
        
    }
    .title{
        .d-flex;
        .al-c;
        font-size: vaR(--ft20);
        gap: vaR(--p10);
        margin-bottom: vaR(--p20);
        &::after{
            display: block;
            content: '';
            width: 18px;
            height: 21px;
            background: url(../images/sanjiao.png) no-repeat;
            background-size: contain;
        }
    }
    .list4{
        .d-grid;
        .grid4;
        gap: var(--p20);
    }
    .list3{
              .d-grid;
        .grid3;
        gap: var(--p30);
    }
    .list2{
         .d-grid;
        .grid2;
        gap: var(--p30);
    }
    .img{
        border-radius: 16px;
        transition: all 0.5s;
        overflow: hidden;
        img{
        transition: all 0.5s;
        }
        &:hover{
            img{
              transform: scale(1.05);   
            }
            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
	       
        }
    }
    .line1{
        .title{
            margin: var(--p30) 0 0 0;
        }
    }
    .line_text{
        .title{
            opacity: 0;
        }
    }
}
@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
    .index_swiper .swiper,
    .top_img{
        height: auto;
        aspect-ratio: 1920/800;
    }
    .clicnts .layui-main,
    .materials ul{
        .grid1;
    }
    .materials li:nth-child(3n+3){
        bottom: 0;
    }
    section{
        padding: 40px 0;
    }
    .logo{
        width: 40vw;
    }
    footer{
        .footerLogo{
            max-width: 20vw;
        }
       .layui-main{
           flex-wrap: wrap;
       }
    }
}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 751px) and (max-width: 1400px) {}

@media only screen and (min-width: 751px) {}