/*公共标题*/ .modulartitle { font-size: 30px; color: #dc2125; text-align: center; } .modularline { position: relative; width: 100%; height: 1px; background-color: #c9c9c9; font-size: 30px; margin-top: 0.4em; } .modularline:before{ content: ""; position: absolute; width: 4em; height: 5px; top: -2px; left: 50%; margin-left: -2em; background-color: #dc2125; } .modularmore{ text-align: center; margin-top: 1.5em; } .modularmore a{ display: inline-block; padding: 0.1em 0.5em; font-size: 14px; border: 1px solid #a0a0a0; color: #a0a0a0; border-radius: 0.4em; } .modularmore a:hover{ border-color: #dc2125; color: #dc2125; } @media (max-width: 768px) { .modulartitle { font-size: 24px; } .modularmore { margin-top: 1em; } .modularmore a { font-size: 12px; } } /*产品*/ .productbox { margin-top: 3%; } .productboxleft { background-color: #e8e8e8; width: 20%; float: left; position: relative; } .productboxright { float: left; width: 77%; margin-left: 3%; } .productmore a { border: #efefef solid 1px; padding: 15px 30px; display: block; color: #b2b2b2; font-size: 12px; text-align: center; border-radius: 5px; } .productbox .prodcttypelist { font-size: 18px; } .productbox .prodcttypelist li { width: 100%; overflow: hidden; float: left; } .productbox .prodcttypelist li a { display: block; text-align: left; line-height: 60px; border-bottom: 1px solid #fff; color: #2a2a2a; padding: 0 20px; } .productbox .prodcttypelist li:last-child a { border-bottom: none; } .productbox .prodcttypelist li a:hover { color: #fd0707; } .productbox .prodcttypelist li a:after { content: ">"; float: right; } .productbox .prodcttypelist li.level1 { background-color: #dc2125; font-size: 1.3em; font-weight: bold; color: #fff; } .productbox .prodcttypelist li.level1 a { color: #fff; } .productbox .prodcttypelist li.level1 a:after { display: none; } .productboxleftbottom { background-color: #dc2125; width: 100%; height: 84px; color: #fff; text-align: center; font-weight: bold; overflow: hidden; } .productboxleftbottom .title { font-size: 16px; margin-top: 6%; } .productboxleftbottom .content { font-size: 24px; padding: 1% 2%; } .recommendproductlist li { width: 48%; margin: 0 1% 20px; float: left; box-sizing: border-box; position: relative; } .recommendproductlist li .imgbox { width: 100%; padding-bottom: 58%; overflow: hidden; } .recommendproductlist li .imgbox img { max-width: 100%; max-height: 100%; } .recommendproductlist li span { display: block; font-size: 14px; width: 100%; height: 2.5em; line-height: 2.5em; background-color: rgba(0,0,0,.5); text-align: center; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: -2.5em; padding: 0 1em; box-sizing: border-box; z-index: 2; position: relative; } @media (max-width: 768px) { .productboxleft { background-color: #efefef; width: 100%; float: left; height: inherit; position: inherit; } .productbox .prodcttypelist li:nth-child(13) a { border-bottom: 0px dashed #959595; } .productboxright { float: left; width: 100%; margin-top: 1%; margin-left: 0px; } .productboxleftbottom { display: none; } .productbox .prodcttypelist li a { line-height: 35px; font-size: 14px; } .productbox .prodcttypelist li { width: 50%; } .productbox .prodcttypelist li.level1 { clear: left; font-weight: normal; } .recommendproductlist li { margin-bottom: 2%; } .recommendproductlist li span{ height: 2em; line-height: 2em; } } /* 产品 end */ /**/ .productshow { margin-top: 35px; } .productshow .list { margin-top: 25px; } .productshow .list li { width: 31%; margin: 0 1% 20px; float: left; box-sizing: border-box; position: relative; } .productshow .list li .imgbox { width: 100%; padding-bottom: 58%; overflow: hidden; } .productshow .list li .imgbox img { max-width: 100%; max-height: 100%; } .productshow .list li span { display: block; font-size: 14px; width: 100%; height: 2.5em; line-height: 2.5em; background-color: rgba(0,0,0,.5); text-align: center; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: -2.5em; padding: 0 1em; box-sizing: border-box; position: relative; z-index: 2; } .productshow .list li:nth-child(n 4) { display: none; } @media (max-width: 768px) { .productshow { margin-top: 10px; } .productshow .list { margin-top: 15px; } .productshow .list li { width: 48%; margin-bottom: 2%; } .productshow .list li:nth-child(n 4) { display: block; } } /*解决方案*/ .programmebox{ background: #a7a7a7; overflow: hidden; padding: 40px; margin-top: 35px; } .programmebox .text{ font-size: 20px; line-height: 1.6; text-align: center; padding: 0 15px; margin-top: 2em; } .programmebox .icon{ width: 100%; overflow: hidden; margin-top: 6%; } .programmebox .icon ul{ margin-left: -15px; margin-right: -15px; } .programmebox .icon li{ float: left; width: 20%; padding: 0 15px; box-sizing: border-box; text-align: center; } .programmebox .icon li img{ display: block; max-width: 100%; margin-left: auto; margin-right: auto; } .programmebox .icon li span{ display: block; font-size: 24px; color: #fff; margin-top: .8em; } @media (max-width: 768px) { .programmebox { margin-top: 10px; } .programmebox .text{ font-size: 14px; } .programmebox .icon li span{ font-size: 12px; } } /*解决方案 end*/ /*优势*/ .advantagebox { overflow: hidden; } .advantagetitle { background-color: #fff; margin-bottom: 1%; margin-top: 2%; } .advantagetitle img { width: 100%; margin-left: auto; margin-right: auto; } .advantagelist { margin-top: 40px; } .advantagelist li{ float: left; height: 245px; box-sizing: border-box; border: 1px solid #fff; } .advantagelist li.imgli{ width: 23%; } .advantagelist li.textli{ width: 27%; color: #fff; background-color: #dc2125; padding: 20px 15px 0 15px; } .advantagelist li.imgli img{ width: 100%; height: 100%; } .advantagelist li.textli .modulartitle, .advantagelist li.textli .modularline{ color: #fff; font-size: 24px; } .advantagelist li.textli .modularline{ background-color: #fff; } .advantagelist li.textli .modularline:before{ background-color: #fff; } .advantagelist li.textli p{ font-size: 14px; line-height: 1.6; margin-top: 1.5em; text-align: justify; } @media (max-width: 768px) { .advantagelist { margin-top: 15px; } .advantagelist li.floatm{ float: right; } .advantagelist li{ height: 200px; } .advantagelist li.imgli{ width: 47%; } .advantagelist li.textli{ width: 53%; padding: 15px 0.5em 0 0.5em; } .advantagelist li.textli .modulartitle, .advantagelist li.textli .modularline{ color: #fff; font-size: 18px; } .advantagelist li.textli p{ margin-top: 1em; font-size: 12px; } } /*优势*/ /*图片列表*/ .publiclist { overflow: hidden; margin-top: 25px; position: relative; } .publiclist li { box-sizing: border-box; padding: 0 1%; margin-bottom: 2%; float: left; } .publiclist .imgbox { box-sizing: border-box; width: 100%; padding-bottom: 86.2%; border: 1px solid #ddd; } .publiclist .imgbox img { max-width: 100%; max-height: 100%; } .publiclist li span { display: block; font-size: 14px; height: 2.5em; line-height: 2.5em; margin-top: -2.5em; background-color: rgba(0,0,0,.5); color: #fff; text-align: center; overflow: hidden; padding: 0 1em; box-sizing: border-box; z-index: 2; position: relative; } @media (max-width: 768px) { .publiclist { margin-top: 15px; } .publiclist li span { font-size: 12px; height: 2.5em; line-height: 2.5em; } } /*合作客户*/ .customer { margin-top: 20px; } .customer .publiclist .button{ width: 40px; } .customer .publiclist li{ width: 25%; margin-bottom: 0; } .customer .publiclist .imgbox{ padding-bottom: 75%; } @media (max-width: 768px) { .customer { margin-top: 10px; } } /*合作客户 end*/ /*荣誉*/ .honor .publiclist .button{ width: 40px; } .honor .publiclist li{ width: 25%; margin-bottom: 0; } .honor .publiclist .imgbox{ padding-bottom: 75%; } /*荣誉 end*/ /* 工程案例 */ .projectbox { margin-top: 40px; } .recommendprojectlist.publiclist ul{ display: block; } .recommendprojectlist.publiclist .imgbox { padding-bottom: 58%; } .recommendprojectlist.publiclist li { width: 33%; } @media (min-width: 769px) { .recommendprojectlist.publiclist ul { transform: translate3d(0, 0px, 0px) !important; } } @media (max-width: 768px) { .projectbox { margin-top: 15px; } .recommendprojectlist.publiclist ul { display: flex; /*移动端由block改成flex,才能滑动*/ } } /* 工程案例 end*/ /*关于我们*/ .aboutbox{ background: no-repeat center center / cover; color: #fff; padding: 5% 0; margin-top: 50px; } .aboutbox .about{ width: 50%; min-width: 600px; max-width: 100%; float: right; overflow: hidden; padding: 0 2%; box-sizing: border-box; } .about .aboutsummary{ font-size: 16px; line-height: 1.8em; margin-top: 2em; height: 12.6em; overflow: hidden; } .about .aboutsummary a{ color: #fff; } .about .more{ display: block; width: 6em; background-color: #dc2125; color: #fff; font-size: 18px; height: 1.4em; line-height: 1.4em; margin: 4em auto 0 auto; text-align: center; } @media (max-width: 768px) { .aboutbox .about{ width: 100%; min-width: auto; padding: 0 1em; } .aboutbox { margin-top: 20px; background: no-repeat center center / cover; } .about .more{ margin-top: 1em; } } /*关于我们 end*/ /*新闻*/ .newsbox{ margin-top: 45px; } .newslist{ margin-top: 25px; } .newslist li{ width: 32%; margin: 0 0.5%; background-color: #e8e8e8; float: left; overflow: hidden; } .newslist li .imgbox{ padding-bottom: 78%; } .newslist li .imgbox img { width: 100%; height: 100%; } .newslist li .newstitle{ font-size: 18px; color: #dc2125; text-align: center; margin-top: 1em; padding: 0 1em; } .newslist li .newscotnent{ font-size: 14px; line-height: 1.6em; height: 4.8em; overflow: hidden; margin-top: 1em; padding: 0 1em; } .newslist li .more{ display: block; width: 6em; height: 2em; line-height: 2em; background-color: #dc2125; color: #fff; text-align: center; margin: 1.5em auto 1.2em auto; } @media (max-width: 768px) { .newsbox{ margin-top: 20px; } } /*新闻 end*/ /**********************************************************/ /*大广告图*/ .bigimg img { max-width: 100%; display: block; margin: 4% auto 0; } @media (max-width: 768px) { .bigimg img { display: none; } } /*友情链接*/ .relativebox { margin-top: 45px; padding-top: 35px; padding-bottom: 35px; background-color: #e8e8e8; } .relativebox li { float: left; width: 18%; margin: .5% 1%; } .relativebox .relativelist { margin-top: 25px; } @media (max-width: 768px) { .relativebox { margin-top: 20px; padding-top: 20px; padding-bottom: 20px; } } /*友情链接*/ .friendshipbox { padding-top: 20px; padding-bottom: 20px; } .friendshipbox li { float: left; width: 18%; margin: 1%; } .friendshipbox .friendshiplist { margin-top: 3%; } @media (max-width: 768px) { .relativebox li, .friendshipbox li { width: 28%; } } /*热搜关键词*/ .hotkeywordsbox { border-bottom: #efefef solid 1px; overflow: hidden; } .hotkeywords { line-height: 40px; color: #969696; overflow: hidden; } .hotkeywords a { color: #969696; } .search { float: right; font-size: 0; } .search input { padding: 0; display: inline-block; height: 28px; line-height: 28px; font-size: 14px; border: 1px solid #666; vertical-align: top; font-family: "微软雅黑"; margin-top: 5px; padding: 0 0.5em; } .search input[type=button] { background-color: #666; color: #fff; line-height: 26px; } @media (max-width: 768px) { .hotkeywordsbox { display: none; } }