@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 }ÀÖ·¢²ÊƱ