@charset "utf-8";
/* CSS Document */
.index__products {
overflow: hidden
}
.index__products ul {
margin: 0;
padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (max-width: 968px) {
.index__products ul {
-webkit-flex-wrap:wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.index__products ul li {
list-style-type: none;
width: 16.66%;
border-right: 1px solid #f3f3f3;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s
}
@media (max-width: 968px) {
.index__products ul li {
width:33.33%;
border-bottom: 1px solid #f3f3f3
}
}
@media (max-width: 668px) {
.index__products ul li {
width:50%
}
}
.index__products ul li a {
display: block;
width: 100%;
position: relative;
overflow: hidden;
padding-top: 110px;
padding-bottom: 490px;
}
@media (max-width: 1681px) {
.index__products ul li a {
padding-top:80px;
padding-bottom: 400px
}
}
@media (max-width: 1440px) {
.index__products ul li a {
padding-top:50px;
padding-bottom: 350px
}
}
@media (max-width: 1380px) {
.index__products ul li a {
padding-top:60px
}
}
@media (max-width: 1180px) {
.index__products ul li a {
padding-top:20px;
padding-bottom: 250px
}
}
@media (max-width: 668px) {
.index__products ul li a {
padding-bottom:180px
}
}
.index__products ul li a .title {
padding-left: 50px;
position: relative
}
@media (max-width: 1681px) {
.index__products ul li a .title {
padding-left:20px
}
}
@media (max-width: 668px) {
.index__products ul li a .title {
padding-left:0;
text-align: center
}
}
.index__products ul li a .title b {
display: block;
color: #333;
height: 26px;
line-height: 26px;
font-size: 26px;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s
}
@media (max-width: 1681px) {
.index__products ul li a .title b {
height:22px;
line-height: 22px;
font-size: 22px
}
}
@media (max-width: 1440px) {
.index__products ul li a .title b {
height:20px;
line-height: 20px;
font-size: 20px
}
}
@media (max-width: 1380px) {
.index__products ul li a .title b {
height:18px;
line-height: 18px;
font-size: 18px
}
}
@media (max-width: 668px) {
.index__products ul li a .title b {
height:16px;
line-height: 16px;
font-size: 16px
}
}
.index__products ul li a .title b em {
display: block;
color: #a6a6a6;
font-weight: normal;
height: 50px;
line-height: 50px;
font-size: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
font-style: normal;
}
@media (max-width: 1681px) {
.index__products ul li a .title b em {
font-size:16px
}
}
@media (max-width: 1440px) {
.index__products ul li a .title b em {
font-size:14px
}
}
@media (max-width: 1380px) {
.index__products ul li a .title b em {
font-size:12px
}
}
@media (max-width: 668px) {
.index__products ul li a .title b em {
height:30px;
line-height: 30px
}
}
.index__products ul li a .title .more01 {
right: 50px;
top: 20px;
z-index: 2;
position: absolute;
opacity: 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
color: #fff;
border: 1px #fff solid;
width: 130px;
line-height: 38px;
display: block;
text-align: center;
}
@media (max-width: 1681px) {
.index__products ul li a .title .more01 {
right:30px
}
}
.index__products ul li a .img {
width: 320px;
position: absolute;
left: 50%;
bottom: 40px;
z-index: 2;
margin-left: -160px
}
@media (max-width: 1681px) {
.index__products ul li a .img {
width:240px;
margin-left: -120px;
bottom: 20px
}
}
@media (max-width: 1380px) {
.index__products ul li a .img {
width:200px;
margin-left: -100px
}
}
@media (max-width: 1180px) {
.index__products ul li a .img {
width:150px;
margin-left: -75px
}
}
@media (max-width: 668px) {
.index__products ul li a .img {
width:130px;
margin-left: -65px;
bottom: 10px
}
}
.index__products ul li a .img img {
width: 100%
}
.index__products ul li.m {
width: 15%
}
.index__products ul li.on {
width: 25%
}
.index__products ul li.on a {
background-color: #e60012
}
.index__products ul li.on a .title b {
color: #fff
}
.index__products ul li.on a .title b em {
color: #fff
}
.index__products ul li.on a .title .more01 {
top: 0;
opacity: 1;
-webkit-transition-delay: .5s;
-o-transition-delay: .5s;
transition-delay: .5s
}ÀÖ·¢²ÊƱ