.clear:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clear{*zoom: 1;} .l-sz-tit { background: #F3F9F7; padding: 25px 15px; } .l-sz-tit .select { margin-top: 10px; } .l-sz-tit .select>div{ float: left; } .l-sz-tit .select .select-1 .name span{ font-size: 18px; color: #4A4A4A; } .l-sz-tit .select .select-1 .name input{ border: 1px solid #ddd; height: 32px; line-height: 32px; font-size: 16px; color: #666; margin-left: 8px; padding: 0 5px; width: 200px; } .l-sz-tit .select .select-r button{ height: 36px; line-height: 36px; padding: 0 15px; margin-left: 10px; cursor: pointer; font-size: 16px; border-radius: 5px; border:none; }.l-sz-tit .select .select-r button.sear{ color:#fff; background: #8d0016; }.l-sz-tit .select .select-r button.reset{ color:#333; background: #eeeeee; } .l-sz-tit>ul>li { position: relative; padding-left: 55px; line-height: 42px; /* float: left; */ /* width: calc(100% - 55px); */ } .l-sz-tit>ul>li:first-child { /* width: auto; */ } .l-sz-tit>ul>li span { position: absolute; left: 0; top: 0; font-size: 18px; color: #4A4A4A; } .l-sz-tit>ul>li a { display: inline-block; padding: 5px 10px; margin-right: 15px; line-height: 32px; border: 1px solid transparent; border-radius: 5px; font-size: 18px; color: #4A4A4A; cursor: pointer; } .l-sz-tit>ul>li a:hover { color: #8d0016; text-decoration: underline; } .l-sz-tit>ul>li a.on { border: 1px solid #8d0016; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.14); color: #8d0016; } .l-sz-list>ul>li { position: relative; float: left; width: 49%; margin-left: 2%; margin-top: 25px; background: url(../images/l-sz-list-bg.png) no-repeat center center; background-size: 100% 100%; transition: all .3s; } .l-sz-list>ul>li:hover { background: url(../images/sz-list-other.png) no-repeat center center; background-size: 100% 100%; } .l-sz-list>ul>li::after { content: ""; position: absolute; bottom: -3px; left: -3px; width: 136px; height: 154px; background: #8d0017; } .l-sz-list>ul>li:nth-child(2n-1) { margin-left: 0; } .l-sz-list>ul>li>a { position: relative; display: block; padding: 30px 20px 14px 9px; overflow: hidden; z-index: 3; } .l-sz-list>ul>li>a .tpp { float: left; width: 136px; } .l-sz-list>ul>li>a .tpp .pic { position: relative; padding-top: 132.35%; overflow: hidden; } .l-sz-list>ul>li>a .tpp .pic img { position: absolute; left: 50%; top: 50%; max-width: 100%; max-height: 100%; object-fit: cover; transform: translate(-50%, -50%); } .l-sz-list>ul>li>a .text { overflow: hidden; padding-left: 14px; } .l-sz-list>ul>li>a .text h2 { position: relative; font-size: 22px; line-height: 1; color: #212121; margin-bottom: 10px; padding-left: 10px; } .l-sz-list>ul>li>a .text h2::after { content: ""; position: absolute; left: 0; bottom: 0; height: 7px; width: 55px; background: linear-gradient(90deg, #8d0016 6%, rgba(0, 162, 152, 0) 95%); z-index: -1; } .l-sz-list>ul>li>a .text p { line-height: 24px; font-size: 14px; color: #999999; word-break: break-all; } .l-sz-list>ul>li>a .text .more { text-align: right; margin-top: 6px; background: none; position: absolute; padding: 0; right: 26px; bottom: 32px; } .l-sz-list>ul>li>a .text .more span { display: inline-block; width: 72px; height: 22px; line-height: 22px; text-align: center; border-radius: 7px; opacity: 1; box-sizing: border-box; border: 1px solid #999999; font-size: 14px; color: #999999; transition: all .3s; } .l-sz-list>ul>li:hover>a .text .more span { background: #8d0016; border: 1px solid transparent; color: #fff; } /* 脙楼脗赂脣鈥犆兟偮得⑩偓啪脙楼脗聬脗聧脙楼脗颅芒鈧�� */ .l-sz-name>ul>li { display: inline-block; border-radius: 4px; opacity: 1; box-sizing: border-box; border: 1px solid #C7C7C7; width: 106px; text-align: center; height: 52px; line-height: 52px; margin-top: 30px; margin-right: 29px; overflow: hidden; } .l-sz-name>ul>li:nth-child(7n) { margin-right: 0; } .l-sz-name>ul>li:hover { border: 1px solid transparent; } .l-sz-name>ul { font-size: 0; } .l-sz-name>ul>li a { display: block; font-size: 20px; color: #369A77; } .l-sz-name>ul>li:hover a { background: #07A871; color: #fff; } @media only screen and (max-width: 640px){ .l-sz-list>ul>li{ width:100%; float:none; margin: 0; } }