/*产品中心分类*/ .main-title { margin-bottom: 4%; margin-top: 4%; } .main-title .ch { display: block; font-size: 40px; position: relative; text-align: center; } .main-title .ch:before { content: "——"; margin-right: 20px; } .main-title .ch:after { content: "——"; margin-left: 20px; } .main-title .en { color: #666666; display: block; font-size: 18px; text-align: center; padding-top: 0.6em; text-transform: uppercase; letter-spacing: 1.5em; } .main-title .en.unSpace { letter-spacing: 0em; } @media (max-width: 768px) { .main-title .ch { font-size: 20px; } .main-title .en { font-size: 12px; letter-spacing: 1em; } } @media (max-width: 768px) { .main-title { margin-top: 6%; } } /*产品中心分类end*/ /* banner图 */ .bannerList { overflow: hidden; position: relative; } .bannerList li { width: 100%; } .bannerList li .imgBox { width: 100%; padding-bottom: 36.45%; box-shadow: 0 0 0 0 red; } @media (max-width: 768px) { .bannerList li .imgBox { padding-bottom: 60%; } } /*产品中心*/ .publicList .list { /*overflow: hidden;*/ } .publicList .list ul { display: flex; } .publicList .list li { box-sizing: border-box; width: 25%; padding: 0 3%; float: left; position: relative; } .publicList .list .imgBox { box-sizing: border-box; width: 100%; padding-bottom: 51.6%; border: 1px solid #ddd; } .publicList .list .imgBox img { max-width: 100%; max-height: 100%; } .publicList .list li span { position: absolute; bottom: 0; left: 3%; display: block; width: 94%; height: 3em; line-height: 3em; background-color: rgba(0, 0, 0, .4); font-size: 20px; text-align: center; color: #fff; } .publicList .list li span a { color: #fff; display: block; } .product.publicList .list li span a:before, .product.publicList .list li span a:after { content: "——"; margin: 0 10px; } @media (max-width: 768px) { .publicList .list ul { display: flex; /*移动端由block改成flex,才能滑动*/ } .publicList .list li span { font-size: 12px; height: 2.5em; line-height: 2.5em; } } /*产品中心*/ .product { overflow: hidden; } .product .type { margin-bottom: 4%; } .product .type ul { text-align: center; } .product .type li { display: inline-block; width: auto; min-width: 6em; margin: 0 1%; text-align: center; height: 38px; line-height: 38px; font-size: 18px; white-space: nowrap; border: 1px solid #8f8f8f; } .product .type li a { display: block; color: #666; padding: 0 5px; } .product .type li:hover, .product .type li.active-nav { background-color: #b80000; border-color: #b80000; } .product .type li:hover a, .product .type li.active-nav a { color: #fff; } .product .cont { margin-top: 4%; } .product .cont .contBox { position: relative; } .product .cont li { float: left; width: 25%; } .product .cont li .paddingBox { display: block; padding: 0 15px; } .product .cont li .imgBox { padding-bottom: 86.2%; border: 1px solid #ddd; } .product .cont li .imgBox img { max-width: 100%; max-height: 100%; } .product .cont li span { display: block; height: 2.5em; line-height: 2.5em; font-size: 14px; background-color: #ddd; text-align: center; padding: 0 0.5em; } .product .cont li span a { color: #000; } .picBox { width: 100%; overflow: hidden; } .picMarquee2, .picMarquee { overflow: hidden; } .product .list { position: relative; } .product .list:before, .product .list:after { position: absolute; content: ""; display: block; width: 1000px; height: 100%; background-color: rgba(0, 0, 0, .4); top: 0; z-index: 23; } .product .list:before { right: 100%; } .product .list:after { left: 100%; } .p-button-next { margin-right: -4%; } .p-button-prev { margin-left: -4%; } .p-button-next, .p-button-prev { background-color: #b80000; z-index: 33; } @media (max-width: 768px) { .product .type ul { text-align: center; } .product .type li { display: inline-block; float: none; min-width: 23%; min-width: auto; font-size: 14px; height: 25px; line-height: 25px; margin-bottom: 10px; } .p-button-next, .p-button-prev{ display: none; } .product .type li a { padding: 0 10px; } } /*荣誉*/ .listCont { position: relative; } .honor-button-prev { left: 0; margin-left: -40px; background-color: #b80000; } .honor-button-next { right: 0; margin-right: -40px; background-color: #b80000; } .honor .list { overflow: hidden; } .honor .list li { padding: 0 1%; } .honor.publicList .list .imgBox { padding-bottom: 76.57%; } .honor .main-header .index-title { color: #fff; } @media (max-width: 768px) { .honor-button-prev, .honor-button-next { display: none; } } /*产品中心end*/ /*关于我们*/ .about { overflow: hidden; } .about .contentBox { margin: 0 -5px; } .about .content { display: table; width: 100%; } .about .content .img, .about .content .text { width: 50%; display: table-cell; vertical-align: top; background-color: #fff; color: #000; } .about .content .img { /*background: url('../Images/aboutImg.jpg') no-repeat right 0 / auto 100%; */ padding-bottom: 28%; position: relative; } .about .content .img video { background-color: #000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .about .content .text .textBox { padding: 3% 0 3% 5%; box-sizing: border-box; width: 100%; max-width: 680px; } .about .content .text .companyName { font-size: 30px; margin-bottom: 20px; } .about .content .text .companyName:after { content: "——"; display: block; margin-top: 5px; line-height: 1; } .about .content .text .companyInfo { font-size: 14px; line-height: 1.8; } .about .content .text .more { display: block; width: 8em; height: 2.2em; line-height: 2.2em; text-align: center; background-color: #b80000; color: #fff; margin-top: 1em; } .aboutBottomimg { margin-top: 10px; } .aboutBottomimg li { float: left; width: 25%; box-sizing: border-box; padding: 0 5px; position: relative; } .aboutBottomimg li .imgBox { padding-bottom: 52%; } .aboutBottomimg li span { position: absolute; width: 100%; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .6); color: #fff; text-align: center; line-height: 2em; display: block; font-size: 16px; } .aboutBottomimg li span a { color: #fff; } @media (max-width: 768px) { .about .contentBox { margin: 0; padding-left: 10px; padding-right: 10px; } .about .content { display: block; } .about .content .img { display: block; width: 100%; background: url('../Images/aboutImg-m.jpg') no-repeat right 0 / auto 100%; padding-bottom: 56%; } .about .content .text { width: 100%; display: block; } .about .content .img, .about .content .text { border: 0; } .about .content .text .companyName { font-size: 18px; margin-bottom: 10px; } .about .content .text .companyInfo { height: 7.2em; overflow: hidden; } } /*关于我们end*/ /*新闻中心*/ .news .type { text-align: center; } .news .type a { display: inline-block; border: 1px solid #8f8f8f; font-size: 20px; min-width: 6em; padding: 0 10px; height: 2em; line-height: 2em; text-align: center; color: #666666; margin: 0 10px; } .news .type a:hover { background-color: #b80000; color: #fff; border-color: #b80000; } .news .list { overflow: hidden; margin-top: 5%; } .news .list ul { margin: 0 -10px; } .news .list li { width: 33.3%; float: left; box-sizing: border-box; padding: 0 10px; } .news .list li .imgBox { padding-bottom: 60%; } .news .list li .newsTitle { font-size: 20px; color: #333; padding-bottom: 1em; border-bottom: 1px dashed #b4b4b4; margin-top: 1em; } .news .list li .newsTitle a { color: #333; } .news .list li p { font-size: 14px; color: #666; line-height: 1.6em; height: 4.8em; overflow: hidden; margin-top: 1.4em; } @media (max-width: 768px) { .news .type a { font-size: 14px; margin-left: 1%; margin-right: 1%; margin-bottom: 10px; padding: 0px 5px; } .news .list{ padding: 0 10px; } .news .list ul{ margin: 0; } .news .list li{ width: 100%; padding: 15px 0; border-bottom: 1px dashed #b3b3b3; } .news .list li .imgBox{ float: left; width: 40%; padding-bottom: 24%; margin-right: 15px; } .news .list li .newsContent{ overflow: hidden; margin-top: 1%; } .news .list li .newsTitle{ margin-top: 0; padding-bottom: .5em; font-size: 16px; border-bottom: none; } .news .list li p{ margin-top: 0.5em; font-size: 12px; height: 3.2em; } } /*新闻中心end*/ /*视频模块*/ .video { padding: 4% 0; background-color: #f5f5f5; } .video .info { float: left; width: 50%; overflow: hidden; } .video .videoBox { float: right; width: 50%; padding-bottom: 28%; position: relative; } .video .info .title { margin-top: 2em; } .video .info .title .ch { font-size: 33px; font-weight: bold; display: block; } .video .info .title .en { font-size: 18px; color: #7e7e7e; text-transform: uppercase; display: block; } .video .info .content { margin-top: 2em; font-size: 18px; line-height: 1.8; padding-right: 2em; } .video .videoBox video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: auto; background-color: #000; } @media (max-width: 768px) { .video .info, .video .videoBox { float: none; } .video .info { width: 100%; } .video .info .title { text-align: center; margin-top: 0; } .video .info .title .ch { font-size: 20px; } .video .info .title .en { font-size: 14px; } .video .info .content { padding-left: 2em; margin-top: 1em; font-size: 14px; display: none; } .video .videoBox { width: 90%; padding-bottom: 51%; margin: 2% auto 0; } } /*视频模块end*/ /*顶部最新新闻*/ .keyWordBox { background-color: #fff; padding: 15px 0; border-bottom: 1px solid #cccccc; } .topKeyWord { float: left; line-height: 30px; color: #000; } .phoneBtn { float: right; font-size: 0; } .phoneBtn input { height: 30px; font-size: 14px; font-family: "微软雅黑"; border: 1px solid #b3b3b3; padding: 2px 10px; color: #b3b3b3; background-color: #eeeeee; box-sizing: border-box; } .phoneBtn input.top_tel { border-radius: 30px 0 0 30px; border-right: none; width: 200px; } .phoneBtn input.phone_submit { border-radius: 0 30px 30px 0; cursor: pointer; } .phoneBtn input.phone_submit:hover { border-color: #00479d; color: #00479d; } @media (max-width: 768px) { .topKeyWord { font-size: 12px; padding-left: 15px; padding-right: 15px; line-height: 1.6; } .phoneBtn { float: none; display: none; } } /*顶部最新新闻end*/ /*客户*/ .Customer .content { overflow: hidden; } .Customer .showInfo { position: relative; background-color: #000; padding: 35px 0; margin: 9% 0; } .Customer .showInfo .imgBox { position: absolute; left: 3%; top: 50%; margin-top: -16.675%; width: 50%; padding-bottom: 33.35%; } .Customer .showInfo .text { color: #fff; height: 130px; overflow: hidden; margin-left: 55%; padding-right: 3%; font-size: 14px; line-height: 1.8; } .Customer .list { overflow: hidden; padding-top: 3%; } .Customer .list ul { margin: 0 -10px; } .Customer .list li { float: left; width: 25%; padding: 0 10px; box-sizing: border-box; } .Customer .list li .inside { position: relative; border: 1px solid #f2f2f2; } .Customer .list li.on .inside { border: 1px solid red; } .Customer .list li .imgBox { padding-bottom: 66.7%; box-sizing: border-box; background-color: #f2f2f2; } .Customer .list li span { background-color: #f2f2f2; display: block; font-size: 14px; height: 2.5em; line-height: 2.5em; text-align: center; color: #333; } .Customer .list li span a { display: block; } @media (max-width: 768px) { .Customer .showInfo{ padding: 15px 0; margin: 8% 0; } .Customer .showInfo .text{ font-size: 12px; } .Customer .showInfo .text{ height: 100px; } .Customer .list ul{ margin: 0 -2px; } .Customer .list li{ padding: 0 2px; } .Customer .list li span{ font-size: 12px; } } @media (max-width: 600px) { .Customer .showInfo{ padding: 15px 0; margin: 6% 0; } } /*长背景图*/ .bImg1 { background: url("../Images/bImg1.jpg") no-repeat center center / cover; } .bImg1 .cont { padding-bottom: 20%; position: relative; margin-top: 6%; } .bImg1 .cont .tel { position: absolute; top: 50%; right: 0; transform: translateY(-50%); color: #fff; width: 28%; } .bImg1 .cont .tel span { display: block; font-size: 30px; } .bImg1 .cont .tel i { display: block; font-size: 48px; } @media (max-width: 1200px) { .bImg1 .cont .tel span{ font-size: 25px; } .bImg1 .cont .tel i{ font-size: 40px; } } @media (max-width: 1000px) { .bImg1 .cont .tel span{ font-size: 20px; } .bImg1 .cont .tel i{ font-size: 30px; } } @media (max-width: 768px) { .bImg1 .cont .tel span{ font-size: 13px; } .bImg1 .cont .tel i{ font-size: 16px; } } /*长背景图*/ /*工程案例*/ .project .type { width: 19%; float: left; } .project .type li { position: relative; background-color: #333333; color: #fff; text-align: center; width: 100%; height: 80px; line-height: 80px; margin-bottom: 15px; font-size: 20px; } .project .type li a { display: block; color: #fff; } .project .imgList { width: 80%; float: right; } .project .imgBox { padding-bottom: 57.7%; } .project .imgBox a { visibility: hidden; } .project .type li:before { content: ""; display: block; position: absolute; left: 100%; top: 50%; margin-top: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #b80000; visibility: hidden; z-index: 1; } .project .type li.on { background-color: #b80000; } .project .type li.on:before { visibility: visible; } .project .imgBox a.on { visibility: visible; } @media (max-width: 1200px) { .project .type li { height: 70px; line-height: 70px } } @media (max-width: 1000px) { .project .type li { height: 55px; line-height: 55px } } @media (max-width: 768px) { .project .type{ float: none; width: 100%; } .project .type li{ float: left; width: 33%; margin: 0.16%; height: 3em; line-height: 3em; font-size: 13px; } .project .type li:before{ display: none; } .project .imgList{ width: 100%; } } /*工程案例 end*/ /*advantage*/ .advantage .content { background: url("../Images/advantage-bg.jpg") no-repeat center center / 50% auto; } .advantage .content.m { display: none; overflow: hidden; background: none; } .advantage .content li { float: left; width: 30%; padding-top: 25px; padding-bottom: 25px; border-bottom: 1px dashed #b7b7b7; } .advantage .content.m li{ box-sizing: border-box; padding-left: 15px; padding-right: 15px; } .advantage .content li:nth-child(2n) { float: right; } .advantage .content li:nth-child(2n+1) { clear: right; } .advantage .content li .icon { float: left; width: 70px; height: 70px; background-color: #b80000; color: #fff; border-radius: 50%; margin-top: 10px; margin-right: 20px; position: relative; } .advantage .content li .icon img { position: absolute; width: 60%; height: 60%; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } .advantage .content li .text { overflow: hidden; } .advantage .content li .text i { font-size: 24px; color: #333333; font-weight: bold; display: block; } .advantage .content li .text span { display: block; font-size: 16px; color: #666666; line-height: 1.6; } @media (max-width: 768px) { .advantage .content { display: none; } .advantage .content.m { display: block; } .advantage .content li{ border-bottom: none; } .advantage .content li .text i{ font-size: 20px; } .advantage .content li .text span { font-size: 14px; } } /*advantage end*/