html,
body {
font-size: 18px;
overflow-x: clip;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
margin: 0;
padding: 0;
}
a {
color: #2d2e2f;
outline: none;
text-decoration: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
a:focus {
text-decoration: none;
}
.nav_item .nav_con {
top: 70px !important;
}
/* =================================================== */
.banner-nav ul li {
margin: 0 auto;
}
.products-con{
background-color: #f3f3f3;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
@keyframes water{
0%{bottom:-134px;}
50%{bottom:-124px;}
100%{bottom:-134px;}
}
.water{
position: absolute;
width: 100%;
height: 380px;
bottom: -134px;
animation-name: water;
animation-duration: 2s;
animation-iteration-count: infinite;
z-index: 0;
}
.water img {
width: 100%;
}
.water:nth-child(1){
animation-delay: 300mss;
}
.water:nth-child(2){
animation-delay: 500ms;
}
.water:nth-child(3){
animation-delay: 700ms;
}
.products-con-list{
width: 1200px;
margin: 60px auto 60px;
/* max-height: 860px; */
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.products-con ul li{
flex: 30%;
margin: 8px;
overflow: hidden;
max-width:388px ;
max-height: 415px;
border-radius: 5px;
background-color: #ebe9e9;
}
.products-con ul li a .pro-pic{
width: 388px;
height: 218px;
position: relative;
overflow: hidden;
}
.products-con ul li a .pro-pic img{
transition: .5s;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%) scale(1);
}
.products-con ul li a .pro-title{
height: 84px;
border-top: #f3f3f3 solid 3px;
position: relative;
}
.products-con ul li a .pro-title h6{
font-size: 16px;
color:#383838;
top:36%;
left: 10%;
position: absolute;
}
.products-con ul li a .pro-title img{
position: absolute;
top:36%;
right:11%;
}
.products-con ul li:hover a .pro-pic img{
transform: translate(-50%, -50%) scale(1.1);
}
.products-con ul li:hover a .pro-title h6{
color:#00479E;
}
@media screen and (max-width: 900px) {
.products-con-list {
width: 100%;
max-height:unset;
}
.products-con ul li {
flex: 45%;
}
.products-con ul li a .pro-pic {
width: 100%;
height: 0;
padding-top: 56.25%;
}
.products-con ul li a .pro-pic img {
transition: .5s;
position: absolute;
width: 100%;
}
.products-con ul li a .pro-title {
height: 58px;
line-height: 58px;
}
.products-con ul li a .pro-title h6 {
top: unset;
}
.products-con ul li a .pro-title img {
width: 8%;
top: 42%;
}
@keyframes water{
0%{bottom:-320px;}
50%{bottom:-310px;}
100%{bottom:-320px;}
}
.water{
bottom: -320px;
animation-name: water;
}
}