.header { } .header_logo { height: 72px; background-color: #fff; } .logo { width: 148px; height: 33px; margin-top: 19.5px; } .search { width: 500px; height: 38px; left: 50%; margin-left: -250px; top: 19.5px; } .search_input { width: 420px; height: 100%; background-color: #f5f5f5; border-radius: 19px 0 0 19px; padding-left: 20px; box-sizing: border-box; } .search_button { width: 80px; height: 100%; line-height: 38px; text-align: center; background-color: #ff4141; border-radius: 0 19px 19px 0; } .search_button i, .search_button span { color: #fff; font-size: 14px; font-weight: 900; } .action { margin-top: 19.5px; } .action i { font-size: 24px; color: #b3b3b3; display: inline-block; margin-bottom: 5px; } .action li { float: left; width: 48px; text-align: center; margin-right: 12px; } .action li:last-child { margin-right: 0; } .action li:last-child img { width: 40px; height: 40px; } .action p { color: #b3b3b3; font-size: 12px; } .header_menu { height: 40px; background: #f7f7f7; box-shadow: 0 10px 20px 0 rgb(0 0 0 / 8%); } .header_menu li{ float: left; width: 75px; text-align: center; line-height: 40px; position: relative; } .header_menu li a{ color: #000; } .active a { font-weight: 600; color: #ff4141 !important; position: relative; } .active a::after { content: ""; position: absolute; bottom: -8px; background: #ff4141; width: 18px; height: 3px; left: 50%; margin-left: -9px; } .banner { margin-top: 24px; } .lunbo { width: 471px; height: 266px; border-radius: 6px; margin-right: 16px; } .info_ul { width: 713px; } .info_ul .item { float: left; width: 227px; height: 128px; margin-right: 16px; margin-bottom: 10px; border-radius: 5px; overflow: hidden; position: relative; } .info_ul .item:nth-child(3n) { margin-right: 0 !important; } .info_ul .item:nth-child(4), .info_ul .item:nth-child(5), .info_ul .item:nth-child(6) { margin-bottom: 0 !important; } .info_ul .item img { width: 100%; } .info_ul .item:hover .info { top: 0 !important; } .info_ul .item:hover .back { display: block !important; } .back { width: 100%; height: 100%; background: rgba(0,0,0,.5); position: absolute; z-index: 2; left: 0; top: 0; display: none; transition: all 0.1s ease; } .info { width: 100%; height: 100%; position: absolute; z-index: 3; left: 0; top: 92px; color: #fff; padding: 10px; box-sizing: border-box; font-size: 14px; transition: all 0.25s ease; } .info_top { line-height: 22px; } .info_center { margin-top: 28px; margin-bottom: 5px; } .info_list {} .info_list li{ float: left; width: 50%; } .video { margin-top: 24px; } .video .title { font-size: 28px; font-weight: 500; position: relative; padding-left: 10px; margin-bottom: 18px; } .video .title::after { content: ""; position: absolute; width: 3px; height: 18px; background: #ff4141; border-radius: 1.5px; left: 0; top: 12px; } .video ul { overflow: hidden; } .video ul li { width: 227px; border-radius: 5px; margin: 0 16px 16px 0; height: 186px; float: left; position: relative; overflow: hidden; } .video ul li:last-child { margin-right: 0 !important; } .video ul li:hover .icon { bottom: -16px !important; } .video ul li:hover img { transform: scale(1.2); } .video ul .top { height: 128px; position: relative; overflow: hidden; } .top img{ width: 100%; height: 100%; transition: all 0.25s ease; } .top span{ position: absolute; right: 6px; bottom: 6px; padding: 2px 4px; background-color: rgba(0,0,0,.8); color: #fff; font-size: 12px; border-radius: 3px; } .top_title { margin-top: 10px; font-size: 14px; color: rgba(0,0,0,.85); } .icon { position: absolute; bottom: 6px; background: #fff; width: 100%; transition: all 0.25s ease; } .icon .icon_item { float: left; color: #666; width: 50%; } .icon .icon_item i{} .icon .icon_item span{ font-size: 12px; } .footer {} .footer_wrap { margin-top: 46px; height: 188px; background: #f2f2f2; } .footer_top { width: 1000px; margin: 0 auto; padding-top: 55px; } .footer_top li{ float: left; } .footer_top li:nth-child(1), .footer_top li:nth-child(2), .footer_top li:nth-child(3) { margin-right: 108px; } .footer_top li a { display: block; color: #906668; font-size: 14px; margin-bottom: 24px; } .footer_top .line{ width: 1px; height: 56px; background: #979797; margin-right: 65px; } .footer_top .code .text{ width: 120px; } .footer_top .code .text p{ color: #666; font-size: 14px; margin-bottom: 24px; } .footer_top .code img{ width: 72px; height: 72px; } .footer_bottom { height: 52px; background-color: #444; color: #999; font-size: 12px; line-height: 52px; text-align: center; }