.product-series h1 { font-size: 20px; padding-top: 30px; padding-bottom: 15px } @media(min-width:760px) { .product-series h1 { font-size: 24px } } .product-series p { line-height: 30px; font-size: 16px } .product-series ul li { margin-bottom: 20px; margin-top: 20px } @media (min-width:1000px) { .product-series ul li { margin-bottom: 30px; margin-top: 30px } } .product-series ul li p { line-height: 42px } .product-series ul li div { width: 128px; height: 128px; padding: 15px; border-radius: 50%; background: #f1f1f1; margin: 0 auto; display: block; position: relative } .product-series ul li div:hover { background: #d40000; transition: all .5s } .product-series ul li div img { margin: 0 auto; display: block; position: absolute; bottom: -5px; left: -6px } .pro-list .pro-list-a { margin-bottom: 45px } @media (min-width:1000px) { .pro-list .pro-list-a .img-middle { margin-top: 5px } } @media (min-width:1200px) { .pro-list .pro-list-a .img-middle { margin-top: 10px } } .pro-list .pro-list-a .img-middle img { margin: 0 auto; height: 208px } @media (min-width:1000px) { .pro-list .pro-list-a .img-middle p { padding-top: 5px } } @media (min-width:1200px) { .pro-list .pro-list-a .img-middle p { padding-top: 0px } } .pro-list .pro-list-a .img-top img, .pro-list .pro-list-a .img-bottom img { margin: 0 auto } @media (min-width:1000px) { .pro-list .pro-list-a .img-top, .pro-list .pro-list-a .img-bottom { margin-top: 15px } } @media (min-width:1200px) { .pro-list .pro-list-a .img-top, .pro-list .pro-list-a .img-bottom { margin-top: 30px } } @media (min-width:1000px) { .pro-list .pro-list-a .img-top p, .pro-list .pro-list-a .img-bottom p { padding-top: 32px } } @media (min-width:1200px) { .pro-list .pro-list-a .img-top p, .pro-list .pro-list-a .img-bottom p { padding-top: 29px } } .pro-list h2 { font-size: 18px; position: absolute; top: 0; text-align: center; width: 100%; line-height: 46px; background: #db1001; color: #ffffff } @media(min-width:760px) { .pro-list h2 { font-size: 20px; line-height: 60px; } } .pro-list .lizi { position: relative; margin-top: 60px } .pro-list .xiangqing, .pro-list .xunjia { text-align: center; position: absolute; color: #ffffff; width: 35%; line-height: 36px; bottom: 40px } .pro-list .xiangqing { background-color: rgba(0, 0, 0, 0.5); left: 25px } .pro-list .xiangqing:hover { background: #ff1c36; opacity: 1; border-style: none } .pro-list .xunjia { background-color: #ff1c36; right: 25px } @media (min-width:1000px) { .pro-list .xm9 { padding-left: 20px } } .pro-list .xm9 h3 { text-align: left; position: relative } @media (min-width:320px) { .pro-list .xm9 h3 { padding-top: 10px; padding-bottom: 20px } } @media (min-width:760px) { .pro-list .xm9 h3 { padding: 15px 0 6px; border-bottom: 1px solid #cccccc } } @media (min-width:1000px) { .pro-list .xm9 h3 { padding: 10px 0 10px } } @media (min-width:1200px) { .pro-list .xm9 h3 { padding: 40px 0 10px } } .pro-list .xm9 h3 span { font-weight: normal; position: absolute } @media (max-width:759px) { .pro-list .xm9 h3 span { display: none } } @media (min-width:760px) { .pro-list .xm9 h3 span { display: block; font-size: 14px; right: 0; bottom: 5px } } @media (min-width:1000px) { .pro-list .xm9 h3 span { right: 0; bottom: 9px } } @media (min-width:1200px) { .pro-list .xm9 h3 span { right: 0; bottom: 7px } } .pro-list .xm9 h3 span a { color: #888888 } .pro-list .xm9 h3 span a:hover { color: #db1001 } .pro-list .xm9 .intro { line-height: 25px } @media (min-width:320px) { .pro-list .xm9 .intro { padding-top: 10px } } @media (min-width:1000px) { .pro-list .xm9 .intro { padding-top: 0 } } @media (min-width:1200px) { .pro-list .xm9 .intro { padding-top: 5px; line-height: 30px } } .pro-list .xm9 .xl4 { list-style: none } .pro-list .xm9 .xl4 p { text-align: center } .pro-list .xm9 .xl3 { list-style: none; margin-top: 10px } .pro-list .xm9 .xl3 p { text-align: center } .section-b { background-color: #f5f5f5; padding-top: 20px } .section-b .shengchanxian { margin-bottom: 30px } .section-b .xl6 { margin-bottom: 10px } @media (min-width:760px) { .section-b .xl6 { margin-bottom: 20px } } .section-b h2 { font-size: 22px; padding: 10px 0 20px; font-weight: normal } .section-b .icon-angle-down, .section-b .icon-angle-right { padding-left: 5px } .section-b .panel { border-style: none } .section-b .panel .panel-head { border-style: none; padding: 9px 0; font-size: 16px; font-weight: 700 } .section-b .panel .panel-body { padding: 8px 0; font-size: 14px; background: #eee; padding-left: 22px } .section-b .panel .panel-body-1 { padding-top: 14px } .section-b .panel .panel-body-2 { padding-bottom: 14px } .section-b .apply-area ul { list-style: none; padding-top: 9px } @media (min-width:400px) { .section-b .apply-area ul { width: 50%; float: left } } .section-b .apply-area ul li { font-size: 14px; padding: 10px 0; border: 1px solid #ccc; margin-bottom: 19px; text-align: center } .section-b .apply-area ul li:hover { border: 1px solid #ff1c36; background: #ff1c36 } .section-b .apply-area ul li:hover a { color: #fff } @media (min-width:450px) and (max-width:999px) { .section-b .material { width: 100% } } @media (min-width:1200px) { .section-b .material { padding-left: 25px } } .section-b .material h4 { font-size: 16px; padding-bottom: 12px; padding-top: 9px; font-weight: 700 } .section-b .material div { margin-bottom: 14px } @media (min-width:450px) and (max-width:999px) { .section-b .material div { width: 50%; float: left; padding-right: 10px } } .section-b .material a { font-size: 14px; line-height: 32px } .section-b .xianchang ul { padding-top: 10px } .section-b .xianchang .date { background-color: #81878f; padding: 4px 6px; color: #fff } .section-b .xianchang .date .text-center { padding-top: 5px; font-size: 28px } .section-b .xianchang .date .m { font-size: 10px } .section-b .xianchang .new-title .ziti a { color: #777777 } .section-b .xianchang .new-title a { padding-top: 3px; padding-bottom: 3px; font-weight: normal } .section-b .xianchang .new-title h4 { display: block; margin-left: 60px } .section-b .xianchang .new-title a { display: block; margin-left: 10px } .section-b .xianchang .new-title p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-size: 14px } @media (max-width:550px) { .section-b .xianchang .new-title p { display: none } } .section-b .xianchang li { margin-bottom: 20px } @media (min-width:1200px) { .section-b .xianchang li { margin-bottom: 30px } } .section-b .xianchang li:hover .date { background: #ef011c } .section-b .xianchang .anli .wenzi { position: relative; bottom: 54px; background-color: rgba(0, 0, 0, 0.5); padding-top: 10px; padding-bottom: 10px } @media (min-width:1000px) and (max-width:1199px) { .section-b .xianchang .anli .wenzi { bottom: 54px } } .section-b .xianchang .anli .wenzi p { padding: 0 15px; line-height: 34px; color: #ffffff } .section-b .xianchang .anli li { display: none } .section-b .xianchang .anli li.active { display: block } .product-list { margin-top: 40px; margin-bottom: 40px } .prodt-block { padding-top: 20px; display: block; background: url(../img/product/prodt-block-bg.jpg) no-repeat center center / cover; } .prodt-block-hover { display: block; position: absolute; left: 15px; top: 20px; right: 15px; bottom: 10px; } @media (max-width:1199px) { .prodt-block-hover { left: 10px; right: 10px; } } .product-list .beijing { display: none; background: #ff334b; opacity: .9; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; color: #fff; text-align: center } .product-list .beijing .xq { line-height: 36px; left: 0; width: 39%; bottom: 80px; border: 1px solid #fff; } .product-list .beijing .xq { margin: 0 auto; } .product-list .beijing h2 { padding-top: 70px; padding-bottom: 24px } @media (min-width:1000px) and (max-width:1199px) { .product-list .beijing h2 { padding-top: 50px; padding-bottom: 14px } } .product-list .beijing p { line-height: 36px; font-size: 16px } @media (min-width:1000px) { .product-list .beijing p { padding: 0 10px 20px } } @media (min-width:1000px) and (max-width:1199px) { .product-list .beijing p { line-height: 26px; } } @media (min-width:1200px) { .product-list .beijing p { padding: 0 10px 30px } } @media (min-width:1440px) { .product-list .beijing p { padding: 0 40px 30px } } .product-list .beijing a { padding: 9px 28px; font-size: 14px; border: 1px solid #fff; color: #fff } .product-list .hst { padding-top: 20px; padding-bottom: 10px; position: relative } .product-list .hst:hover { transition: all .2s } @media (min-width:1000px) { .product-list .hst:hover h4, .product-list .hst:hover span { opacity: 0 } } .product-list .hst:hover .beijing { display: block } @media (max-width:999px) { .product-list .hst:hover .beijing { display: none } } .product-list h4 { text-align: center; padding-bottom: 20px; font-size: 17px } @media (min-width:450px) and (max-width:759px) { .product-list h4 { font-size: 16px } } .product-list span { display: block; width: 100%; height: 43px; text-align: center; font-size: 14px } .product-list span a { display: inline-block; height: 43px } .product-list span .pdf { width: 50%; float: left; line-height: 24px } .product-list span .word { width: 50%; line-height: 24px; float: left } .case { margin-bottom: 80px } .case h2 { padding: 15px 0 20px } .case ul p { line-height: 40px; text-align: center } .case .content p { line-height: 32px } @media (min-width:1000px) { .case .facility li { height: 232px } } .case .facility img { margin: 0 auto; display: block } @media (min-width:1000px) { .case .facility li { margin-bottom: 0px } } @media (min-width:1200px) { .case .facility li { margin-top: 0px; margin-bottom: 0px } } @media (max-width:449px) { .case .facility li { width: 50%; float: left } } .case .facility li p { line-height: 25px } @media (min-width:1000px) { .case .case-occa li { height: 232px } } .case .case-occa li { margin-bottom: 15px } .case .case-occa li p { margin-top: 10px } .case .pro-material { height: 70px } .case .pro-material li { margin-bottom: 20px; text-align: center } @media (min-width:1000px) { .case .pro-material li { margin-bottom: 5px } } @media (min-width:1200px) { .case .pro-material li { margin-bottom: 20px } } .case .pro-material li p { border: 1px solid #333333 } .case .pro-material li p:hover { background: #ff1c36; border: 1px solid #ff1c36; color: #fff } @media (min-width:320px) { .case .pro-material li { width: 33.333333%; float: left; padding: 0 3px } } @media (min-width:500px) { .case .pro-material li { width: 16.666666%; float: left } } .case .pro-content { line-height: 30px } .comprehensive-support{ background: #f1f1f1; padding: 70px 0 50px;} .comprehensive-support-head{ text-align: center; margin-bottom: 30px;} .comprehensive-support-head h2{ font-size: 36px; line-height: 72px;} .comprehensive-support-head p{ font-size: 18px; line-height: 42px;} .comprehensive-support-list dl{ position: relative; margin-bottom: 30px;} .comprehensive-support-list dd{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 30px 40px; color: #fff;} .comprehensive-support-list-img img{ width: 100%;} .comprehensive-support-list dd h3{ font-size: 24px; line-height: 42px; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);} .comprehensive-support-list dd p{ font-size: 16px; line-height: 32px; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);} .comprehensive-support-btn{display: inline-block; width: 150px; height: 46px; font-size: 16px; line-height: 46px; margin-top: 20px; position: relative; overflow: hidden; color: #fff; border-radius: 23px; text-align: center; opacity: 0; transition: all .5s; background: #f45c43; background: -moz-linear-gradient(left, #f45c43 0%, #eb3349 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349)); background: -webkit-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -o-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -ms-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: linear-gradient(to right, #f45c43 0%,#eb3349 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 ); } .comprehensive-support-btn:hover{ color: #fff;} .comprehensive-support-btn::before{ position: absolute; content: " "; top: 0; right: 100%; width: 300%; height: 100%; border-radius: 23px ; background: rgba(255,255,255,.3); transition: all .5s;} .comprehensive-support-btn:hover::before{ right: -300%;} .comprehensive-support-list dl:hover .comprehensive-support-btn{ opacity: 1;} @media(max-width: 580px){ .comprehensive-support-list-img2{ overflow: hidden;} .comprehensive-support-list-img2 img{ width: 140%; max-width: 200%; margin-left: -20%;} } @media(max-width: 380px){ .comprehensive-support-list-img2{ overflow: hidden;} .comprehensive-support-list-img2 img{ width: 200%; max-width: 200%; margin-left: -50%;} }