@font-face { font-family: 'ziti'; src: url("../images/ziti.TTF"); } .container{ width: 1560px; margin: 0 auto; } .clear:after{ display: block; content: ''; clear: both; } /*导航*/ .head { padding: 28px 0 14px 0; /*background: #fff;*/ /*position: relative;*/ position: absolute; width:100%; z-index:999; } .logo{ float: left; } .head .logo img { display: block; float: left; width: 64px; height: 56px; } .logo-tit{ float: left; margin-left: 16px; } .logo-tit h3{ /*color: #1d1d1d;*/ color:#fff; font-size: 24px; font-weight: bold; } .logo-tit p{ /*color: #999999;*/ color:#fff; font-size: 14px; text-transform: uppercase; } .nav{ width: 50%; float: left; margin-left: 10%; } .nav ul li{ float: left; width: 16.6%; text-align: center; } .nav ul li.active a{ color: #da0502; font-weight: bold; } .nav ul li.active a p{ color: #da0502; font-weight: normal; } .nav ul li a{ /*color: #1d1d1d;*/ color:#fff; font-size: 16px; transition: all 0.5s; } .nav ul li a p{ /*color: #999999;*/ color:#fff; font-size: 14px; transition: all 0.5s; } .nav ul li:hover a{ color: #da0502; transition: all 0.5s; font-weight: bold; } .nav ul li:hover a p{ color: #da0502; transition: all 0.5s; font-weight: normal; } .head-tel{ width: 400px; height: 100px; line-height: 100px; background: #da0502; position: absolute; right: 0; top: 0; } .head-tel strong{ display: block; background: url("../images/h-tel.png") no-repeat center left; color: #fff; font-size: 18px; text-indent: 41px; margin-left: 40px; } /*banner*/ .banner { width: 100%; position: relative; z-index: 5; /*height: 650px;*/ height: 749px; } .ban{ height: 100%; } .banner-inner { width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 3; } .slide-inner a{ display: block; height: 100%; } .banner .slide-inner .text { position: absolute; /*top: 40%;*/ top:50%; left:50%; transform: translate(-50%,-50%); width: 100%; text-align: center; } .banner .swiper-slide1 .slide-inner .text .fir{ transform: translateY(10px); opacity: 0; transition: all 0.5s; color: #fff; font-size: 44px; font-weight: bold; } .banner .swiper-slide1 .slide-inner .text .sec { transform: translateY(10px); opacity: 0; transition: all 0.5s; margin: 40px 0 70px 0; text-align: center; } .banner .swiper-slide1 .slide-inner .text .sec img{ max-width: 100%; display: block; text-align: center; margin: 0 auto; } .banner .swiper-slide1 .slide-inner .text .thr { color: #fff; font-size: 28px; transform: translateY(10px); opacity: 0; transition: all 0.5s; transition-delay: 0.5s; } .banner .swiper-slide1.text_move .slide-inner .text .fir { transform: translateY(0); opacity: 1; } .banner .swiper-slide1.text_move .slide-inner .text .sec { transform: translateY(0); opacity: 1; } .banner .swiper-slide1.text_move .slide-inner .text .thr { transform: translateY(0); opacity: 1; } /*slide2*/ .banner .swiper-slide2 .slide-inner .text .fir{ transform: translateY(10px); opacity: 0; transition: all 0.5s; color: #fff; font-size: 44px; font-weight: bold; } .banner .swiper-slide2 .slide-inner .text .sec { transform: translateY(10px); opacity: 0; transition: all 0.5s; margin: 40px 0 70px 0; text-align: center; } .banner .swiper-slide2 .slide-inner .text .sec img{ max-width: 100%; display: block; text-align: center; margin: 0 auto; } .banner .swiper-slide2 .slide-inner .text .thr { color: #fff; font-size: 28px; transform: translateY(10px); opacity: 0; transition: all 0.5s; transition-delay: 0.5s; } .banner .swiper-slide2.text_move .slide-inner .text .fir { transform: translateY(0); opacity: 1; } .banner .swiper-slide2.text_move .slide-inner .text .sec { transform: translateY(0); opacity: 1; } .banner .swiper-slide2.text_move .slide-inner .text .thr { transform: translateY(0); opacity: 1; } /*slide3*/ .banner .swiper-slide3 .slide-inner .text .fir{ transform: translateY(10px); opacity: 0; transition: all 0.5s; color: #fff; font-size: 44px; font-weight: bold; } .banner .swiper-slide3 .slide-inner .text .sec { transform: translateY(10px); opacity: 0; transition: all 0.5s; margin: 40px 0 70px 0; text-align: center; } .banner .swiper-slide3 .slide-inner .text .sec img{ max-width: 100%; display: block; text-align: center; margin: 0 auto; } .banner .swiper-slide3 .slide-inner .text .thr { color: #fff; font-size: 28px; transform: translateY(10px); opacity: 0; transition: all 0.5s; transition-delay: 0.5s; } .banner .swiper-slide3.text_move .slide-inner .text .fir { transform: translateY(0); opacity: 1; } .banner .swiper-slide3.text_move .slide-inner .text .sec { transform: translateY(0); opacity: 1; } .banner .swiper-slide3.text_move .slide-inner .text .thr { transform: translateY(0); opacity: 1; } .swiper-pagination_wrap { position: absolute; bottom: 5%; z-index: 100; right: 12.4%; } .swiper-pagination_wrap p em.em_1 { color: #fff; font-size: 30px; font-style:normal; font-weight: bold; } .swiper-pagination_wrap p em.em_2 { color: #fff; font-size: 20px; font-style: normal; font-weight: bold; } .swiper-pagination_wrap p b { font-size: 20px; color: #fff; } .ban-next { right: 10%; background: url("../images/ban-next.png") no-repeat center center; width:42px!important; height: 42px!important; } .ban-prev { left: 10%; background: url("../images/ban-prev.png") no-repeat center center; width: 42px!important; height: 42px!important; } /*首页-公司简介*/ .bg-color { background: #fff; } .index1{ width: 100%; position: relative; padding:3% 0; } .index1-left{ width: 45%; float: left; } .index1-title h3 strong{ color: #1d1d1d; font-size: 54px; } .index1-title h3 sub{ color: #666666; font-size: 20px; } .index1-left h4{ color: #da0502; font-size: 24px; padding-top: 20px; } .index1-left h4:after{ display: block; content: ''; width: 72px; height: 4px; background: #da0502; margin-top: 10px; } .index1-left p{ padding-top: 35px; color: #666666; font-size: 16px; line-height: 38px; } .index1-left a{ display: block; width: 196px; height: 50px; line-height: 50px; border: 1px solid #da0502; border-radius: 26px; text-align: center; color: #da0502; font-size: 15px; margin-top: 40px; position: relative; z-index: 100; } .index1-left a:hover{ color: #fff; } .index1-left a:hover:before{ width: 100%; left: 0; opacity: 1; transition: all 0.4s; } .index1-left a:before{ content: ""; width: 0; height: 100%; background: #da0502; position: absolute; top: 0; border-radius: 26px; left: 50%; opacity: 0; transition: all 0.4s; z-index: -1; } .index1-right{ width: 45%; float: right; height: 506px; } .index1-right img{ display: block; width: 100%; height: 100%; object-fit: cover; } .index1 ul { border: 1px solid #eeeeee; width: 100%; height: 165px; margin-top: 57px; overflow: hidden; } .index1 ul li{ width: 19.9%; float: left; border-right: 1px solid #eeeeee; height: 94%; padding:3% 2.5%; } .index1 ul li:last-child{ border-right: none; } .index1-img{ background: url("../images/six.png") no-repeat center center; width: 75px; height: 85px; line-height: 85px; text-align: center; float: left; transition: all 0.4s; margin-right: 23px; } .index1-img img{ display: inline-block; max-width: 100%; max-height: 100%; vertical-align: middle; } .index1 ul li:hover .index1-img{ transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transition: all 0.4s; } .index1-tit{ padding-top: 10px; } .index1-tit h3{ color: #1d1d1d; font-size: 20px; padding-bottom: 10px; } .index1-tit p{ color: #666666; font-size: 14px; } /*首页-产品中心*/ .index2{ width: 100%; position: relative; background:#f6f6f6 url("../images/pro.jpg") no-repeat center top; padding:3% 0; } .title{ text-align: center; } .title h3{ color: #fff; font-size: 40px; font-weight: bold; } .title h3:after{ display: block; content: ''; width: 68px; height: 4px; background: #da0502; margin: 10px auto 20px auto; } .title p{ color: #fff; font-size: 16px; } .chanpin{ margin-top: 54px; width: 100%; padding-bottom: 10px; } .chanpin .swiper-wrapper{ height: 100%; } .cp-li{ background: #fff; box-shadow: 0px 7px 10px -2px rgba(0,47,125,0.08); } .index2-img{ width: 100%; height: 227px; overflow: hidden; } .index2-img img{ display: block; width: 100%; height: 100%; object-fit: contain; } .index2-tit{ height: 54px; line-height: 54px; text-align: center; color: #1d1d1d; font-size: 18px; transition: all 0.4s; } .cp-li:hover .index2-tit{ background: #da0502; transition: all 0.4s; color:#ffff; } .index2-more{ margin: 0 auto; width: 196px; height: 50px; border-radius: 26px; text-align: center; } .index2-more a{ display: block; width: 100%; height: 100%; line-height: 50px; border: 1px solid #da0502; border-radius: 26px; text-align: center; color: #da0502; font-size: 15px; margin-top: 40px; position: relative; z-index: 100; } .index2-more a:hover{ color: #fff; } .index2-more a:hover:before{ width: 100%; left: 0; opacity: 1; transition: all 0.4s; } .index2-more a:before{ content: ""; width: 0; height: 100%; background: #da0502; position: absolute; top: 0; border-radius: 26px; left: 50%; opacity: 0; transition: all 0.4s; z-index: -1; } /*项目案例*/ .index3{ width: 100%; position: relative; padding: 3% 0; } .index3-list{ width: 100%; position: relative; height: 512px; background: #fff; } .index3-title{ position: absolute; top: 0; right: 0; text-align: right; z-index: 300; } .index3-title h3{ color: #333333; font-size: 40px; font-weight: bold; position: relative; } .index3-title h3:after{ display: block; content: ''; width: 68px; height: 4px; background: #da0502; right: 0; position: absolute; margin-top: 10px; } .index3-title p{ color: #666; font-size: 16px; margin-top: 30px; } .anli{ height: 100%; } .anli-li a{ display: block; width: 100%; height: 100%; } .index3-left{ width: 45%; position: absolute; left: 0; z-index: 10; height: 100%; } .index3-left img{ display: block; width: 100%; height: 100%; object-fit: cover; } .index3-right{ width: 47%; position: absolute; right: 0; z-index: 20; height: 55%; bottom: 2%; background: #f6f6f6; padding: 2% 4.5%; } .index3-right h3{ color: #333333; font-size: 24px; font-weight: bold; padding-bottom: 28px; } .index3-right p{ color: #666666; font-size: 16px; line-height: 28px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .index3-right span{ color: #da0502; display: block; font-size: 15px; padding-top: 15px; transition: all 0.4s; position: relative; width: 70px; line-height: 40px; } .index3-right span:before{ display: block; content: ''; width: 0; height: 1px; background: #da0502; transition: all 0.4s; position: absolute; left: 0; } .index3-right span:after{ display: block; content: ''; width: 0; height: 1px; background: #da0502; transition: all 0.4s; position: absolute; right: 0; } .index3-right:hover span:after,.index3-right:hover span:before{ width: 70px; } .anli-next{ width: 60px!important; height: 46px!important; background: url("../images/anli-next.png") no-repeat center center; top: 93.2%!important; right: 0!important; opacity: 1!important; z-index: 999; } .anli-next:after{ display: none; } .anli-prev{ width: 60px!important; height: 46px!important; background: url("../images/anli-prev.png") no-repeat center center; top: 93.2%!important; right: 60px; left: auto!important; opacity: 1!important; z-index: 999; } .anli-prev:after{ display: none; } /*广告栏*/ .index4{ width: 100%; position: relative; padding: 2% 0; background: url("../images/guanggao.jpg") no-repeat center center; } .index4-left{ float: left; width: 60%; } .index4-left p{ width: 473px; height: 47px; line-height: 47px; text-align: center; background: #fff; color: #333333; font-size: 18px; border-radius: 5px; letter-spacing: 3px; } .index4-left h3{ font-size: 51px; color: #fff; font-family: ziti; padding-top: 15px; margin-bottom: -10px; } .index4-left small{ color: #fff; text-transform: uppercase; font-size: 18px; } .index4-right{ width: 28%; float: right; position: relative; } .index4-right strong{ display: block; width: 298px; height: 68px; line-height: 68px; text-align: center; background: url("../images/h-tel.png") no-repeat center left 28px; border: 1px solid #fff; border-radius: 6px; margin: 0 auto; color: #fff; font-size: 24px; margin-top: 40px; text-indent: 20px; transition: all 0.4s; } .index4-right strong:hover{ background: rgba(255,255,255,0.2) url("../images/h-tel.png") no-repeat center left 28px; transition: all 0.4s; } /*优势*/ .index5{ width: 100%; position: relative; padding: 3% 0; } .title1 h3{ color: #333; } .title1 p{ color: #333; } .index5 ul{ margin-top: 3%; } .index5 ul li{ position: relative; width: 100%; height: 322px; background: #f6f6f6; margin-bottom: 26px; } .index5 ul li:nth-child(odd) .index5-img{ float: left; } .index5 ul li:nth-child(even) .index5-img{ float: right; } .index5 ul li:nth-child(odd) .index5-tit{ float: right; margin-right: 5%; padding-top: 3%; } .index5 ul li:nth-child(even) .index5-tit{ float: left; padding-left: 5%; padding-top: 3%; } .index5-img{ width: 42%; height: 100%; } .index5-img img{ display: block; width: 100%; height: 100%; object-fit: cover; } .index5 ul li:nth-child(odd) .index5-img img { object-position: right; } .index5 ul li:nth-child(even) .index5-img img{ object-position: left; } .index5-tit{ width: 50%; position: relative; } .index5-tit .num{ color: #e0e0e0; font-size: 68px; font-weight: bold; font-style: italic; position: absolute; top: 0; right: 0%; } .index5-tit h3{ color: #1d1d1d; font-size: 28px; font-weight: bold; } .index5-tit h4{ color: #333; font-size: 16px; padding:12px 0 25px 0; } .index5-tit p{ color: #666666; font-size: 15px; line-height: 28px; } .ys{ width: 100%; border-left: 1px solid #da0502; padding: 2% 0 3% 0; } .ys p{ color: #666666; font-size: 15px; line-height: 26px; background: url("../images/yuan.png") no-repeat top 5px left; padding-left: 3%; margin-bottom: 3%; margin-left: -6px; } .ys p:nth-child(2){ margin-bottom: 0; } /*新闻资讯*/ .index6{ width: 100%; position: relative; padding: 3% 0; background: url("../images/news.jpg") no-repeat center center; } .index6-left{ width:23%; float: left; background: url("../images/n1.jpg") no-repeat center center; height: 575px; background-size: cover; padding: 35px; position: relative; } .index6-left h3 strong{ color: #fff; font-size: 54px; display: block; float: left; } .index6-left h3 sub{ color: #fff; font-size:20px; font-weight: normal; display: block; float: left; padding-top: 37px; padding-left: 10px; } .index6-left p{ color: #fff; font-size: 15px; line-height: 30px; padding-top: 53px; } .index6-left a{ position: absolute; width: 60px; height: 46px; background:url("../images/n3.png") no-repeat center center; bottom: 10%; transition: all 0.4s; } .index6-left:hover a{ background: rgba(255,255,255,0.5) url("../images/n3.png") no-repeat center center; transition: all 0.4s; } .index6-right{ width: 69%; float: right; } .n1{ width: 100%; height: 300px; margin-bottom: 19px; background: #fff; } .n1-img{ width:42%; float: left; height: 100%; overflow: hidden; } .n1-img img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all .5s ease; } .n1:hover .n1-img img{ transform: scale(1.04); transition: all .5s ease; } .n1-tit{ width: 50%; float: right; padding:3% 0; margin-right: 4%; } .n1-tit h3{ color: #1d1d1d; font-size: 22px; line-height: 30px; transition: all 0.4s; } .n1-tit small{ color: #999999; font-size: 14px; display: block; padding-top: 10px; } .n1-tit p{ color: #666666; font-size: 15px; line-height: 30px; padding-top: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .n1-tit span{ color: #da0502; display: block; font-size: 15px; padding-top: 15px; transition: all 0.4s; position: relative; width: 70px; line-height: 40px; } .n1-tit span:before{ display: block; content: ''; width: 0; height: 1px; background: #da0502; transition: all 0.4s; position: absolute; left: 0; } .n1-tit span:after{ display: block; content: ''; width: 0; height: 1px; background: #da0502; transition: all 0.4s; position: absolute; right: 0; } .n1:hover .n1-tit span:after,.n1:hover .n1-tit span:before{ width: 70px; transition: all 0.4s; } .n1:hover .n1-tit h3{ color: #da0502; transition: all 0.4s; } .n2{ width: 100%; height: 325px; background: #fff; } .n2 ul{ padding: 3%; } .n2 ul li{ width: 100%; border-bottom: 1px solid #eee; padding-bottom: 2%; margin-bottom: 2%; transition: all 0.4s; } .n2 ul li h3{ color: #1d1d1d; font-size: 22px; margin-bottom: 15px; transition: all 0.4s; } .n2 ul li h3 small{ color: #666666; font-size: 15px; float: right; } .n2 ul li p{ color: #666666; font-size: 15px; line-height: 30px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .n2 ul li:last-child{ border-bottom: 0; } .n2 ul li:hover h3{ color: #da0502; transition: all 0.4s; } .n2 ul li:hover{ border-bottom: 1px solid #da0502; } .n2 ul li:last-child:hover{ border-bottom: 0; } /*底部*/ .footer{ width: 100%; padding: 3% 0 0 0; position: relative; background: url("../images/foot.jpg") no-repeat center center; } .f-center{ padding: 62px 0; } .foot1{ width: 26%; float: left; height: 71px; background: url("../images/f-line.png") no-repeat center right; padding-top: 24px; overflow: hidden; } .foot1 img{ float: left; display: block; width: 64px; height: 56px; } .foot1 .foot1-tit{ margin-left: 20px; float: left; } .foot1 .foot1-tit h1{ color: #fff; font-size: 24px; font-weight: bold; } .foot1 .foot1-tit small{ color: rgba(255,255,255,0.5); font-size: 13px; text-transform: uppercase; letter-spacing: -0.5px; } .foot2{ width: 16%; float: left; height: 95px; background: url("../images/f-line.png") no-repeat center right; padding: 0 4%; } .foot2 ul li{ width: 50%; text-align: center; line-height: 34px; float: left; } .foot2 ul li a{ color: #fff; font-size: 16px; } .foot3{ width: 22%; float: left; height: 95px; background: url("../images/f-line.png") no-repeat center right; padding: 0 4%; } .foot3 p{ color: #fff; font-size: 16px; line-height: 34px; } .foot4{ width: 16%; float: right; padding-left: 4%; } .foot4 .f-ewm{ width: 100px; height: 100px; float: left; } .f-ewm img{ max-width: 100%; } .f-tit{ float: left; margin-left: 13px; margin-top: 42px; } .f-tit p{ color: #fff; font-size:16px; line-height: 34px; } .admin{ width: 100%; height: 80px; line-height: 80px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; } .admin p{ color: #fff; font-size: 16px; } .admin p a{ color: #fff; font-size: 16px; } /*内页*/ /*内页-banner*/ .fixed-banner { overflow: hidden; text-align: center; /*height: 492px;*/ height: 570px; position: relative; } .nei-tit{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .fixed-banner h3 { font-size: 38px; color: #fff; font-weight: bold; } .fixed-banner p { font-size: 20px; color: #fff; padding-top: 10px; } /*面包屑*/ .location{ width: 100%; line-height: 52px; position: relative; z-index: 100; background: rgba(8,40,131,0.42); margin-top: -52px; } .loca-l{ background: url("../images/home.png") no-repeat center left; color: #fff; font-size: 14px; text-indent: 38px; } .loca-l a{ color: #fff; font-size: 14px; } /*内页-公司简介*/ .about1{ width: 100%; position: relative; padding: 3% 0; background: #f5f5f5; } .about1-left{ width: 45%; float: left; height: 465px; } .about1-left img{ display: block; width: 100%; height: 100%; object-fit: cover; } .about1-right{ width: 47%; float: right; height:405px; padding: 30px 4%; background: #fff; } .about1-right h3{ color: #333333; font-size: 22px; font-weight: bold; } .about1-right h3:after{ display: block; content: ''; width: 40px; height: 2px; background: #d2d2d2; margin: 23px 0 42px 0; } .about1-right h4{ color:#da0502; font-size: 18px; padding-bottom: 17px; } .about1-right .about1-tit{ overflow-y: auto; max-height: 275px; } .about1-right .about1-tit p{ color: #333333; font-size: 15px; line-height: 34px; } .about2{ width: 100%; position: relative; z-index: 50; padding: 3% 0; background-image: url(../images/about2.jpg); background-position: center; background-size: cover; background-attachment: fixed; } .about2 ul{ width: 90%; margin: 0 auto; } .about2 ul li{ width: 25%; float: left; text-align: center; } .about2 ul li img{ display: block; max-width: 100%; text-align: center; margin: 0 auto; transition: all 0.4s; } .about2 ul li h3{ color: #ffffff; font-size: 22px; padding: 35px 0 18px 0; } .about2 ul li p{ color: #fff; font-size: 16px; } .about2 ul li:hover img{ transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transition: all 0.4s; } .ab-honor{ width: 100%; background: url("../images/honor.jpg") no-repeat center center; padding: 3% 0; } .honor{ width: 100%; } .honor .list{ position: relative; width: 1357px; margin: 0 auto; } .h-type ul{ width: 444px; margin: 0 auto; } .h-type ul li{ width: 147px; height:29px; float: left; font-size: 22px; color: #333; text-align: center; } .h-type ul li:after{ display: block; content: '/'; font-size: 22px; color: #333; float: right; } .h-type ul li.on{ color: #da0502; font-weight: bold; } .h-type ul li:last-child:after{ display: none; } .h-list{ margin-top: 43px; height: 285px; overflow:hidden; } .h-list .swiper-container{ padding:10px 0; } .h-list .list .swiper-slide{ height: 260px; background: #fff; } .h-list .list .swiper-slide:hover{ height: 280px; position: relative; margin-top: -10px; transition: all 0.4s; } .h-list .list .swiper-slide:hover .h-img{ border: 1px solid #badafe; height: 278px; transition: all 0.4s; box-shadow: 0 0 27px rgba(1,90,270,0.13); } .h-img{ width: 99%; height:258px; border: 1px dashed #badafe; transition: all 0.4s; } .h-img .img{ padding: 22px 13px; height: 210px; overflow:hidden; } .h-img .img img{ width: 100%; height: 100%; display: block; object-fit: cover; } .h-list .list .swiper-slide p{ line-height: 50px; text-align: center; color: #333333; font-size: 16px; } .h-next{ background: url(../images/anli-right.png) no-repeat center center!important; width: 22px!important; height: 40px!important; right: -3%!important; } .h-next:after{ display: none!important; } .h-prev{ background: url(../images/anli-left.png) no-repeat center center!important; width: 22px!important; height: 40px!important; left: -3%!important; } .h-prev:after{ display: none!important; } .t-next{ background: url(../images/anli-right.png) no-repeat center center!important; width: 22px!important; height: 40px!important; right: -3%!important; } .t-next:after{ display: none!important; } .t-prev{ background: url(../images/anli-left.png) no-repeat center center!important; width: 22px!important; height: 40px!important; left: -3%!important; } .t-prev:after{ display: none!important; } .hj-next{ background: url(../images/anli-right.png) no-repeat center center!important; width: 22px!important; height: 40px!important; right: -3%!important; } .hj-next:after{ display: none!important; } .hj-prev{ background: url(../images/anli-left.png) no-repeat center center!important; width: 22px!important; height: 40px!important; left: -3%!important; } .hj-prev:after{ display: none!important; } /*内页-产品中心*/ .info-product{ width: 100%; padding: 3% 0; position: relative; background: #f5f5f5; } .info-pro-type{ width: 100%; position: relative; margin-bottom: 3%; } .info-pro-type .type{ width: 1350px; margin: 0 auto; } .info-pro-type a{ display: block; height: 50px; text-align: center; line-height: 50px; color: #333333; font-size: 16px; border: 1px solid #d2d2d2; position: relative; z-index: 100; } .info-pro-type a:before{ display: block; content: ''; width:70px; height: 1px; position: absolute; top: 50%; transform: translateY(-50%); right: -41%; background: url("../images/pro-line.png") no-repeat center center; } .info-pro-type a:after{ display: block; content: ''; position: absolute; width: 0; height: 100%; background: #da0502; left: 50%; transform: translateX(-50%); top: 0; z-index: -1; transition: all 0.4s; } .info-pro-type a:hover{ color: #fff; } .info-pro-type a:hover:after{ width: 100%; transition: all 0.4s; } .type-next{ width: 14px!important; height: 18px!important; background: url("../images/type-right.png") no-repeat center center; right: 0!important; margin-top: -11px!important; } .type-prev{ width: 14px!important; height: 18px!important; background: url("../images/type-left.png") no-repeat center center; left: 0!important; margin-top: -11px!important; } .info-pro{ width: 100%; } .info-pro ul li{ width: 23.5%; float: left; margin-right: 2%; margin-bottom: 2%; } .info-pro ul li:nth-child(4n){ margin-right: 0; } /*页码*/ .de-page-mian { overflow: hidden; text-align: center; font-size: 0; margin: 3% 0; } .de-page-mian .page-inner { display: inline-block; overflow: hidden; } .de-page-mian .page-inner a { display: block; float: left; min-width: 26px; padding: 0 5px; height: 26px; border: 1px solid #dddddd; background: #fff; text-align: center; line-height: 26px; font-size: 14px; color: #333; margin-right: -1px; overflow: hidden; } .de-page-mian .page-inner a.active, .de-page-mian .page-inner a:hover { color: #fff; border-color: #da0502; background: #da0502; } .de-page-mian .page-inner a.prev { margin-right: 10px; background: #fff url(../images/prev.jpg) no-repeat center; } .de-page-mian .page-inner a.prev.on { background: #fff url(../images/prev-hover.jpg) no-repeat center; } .de-page-mian .page-inner a.prev:hover { background-color: #fff; border-color: #dddddd; } .de-page-mian .page-inner a.next { margin-left: 10px; margin-right: 15px; background: #fff url(../images/next.jpg) no-repeat center; } .de-page-mian .page-inner a.next.on { background: #fff url(../images/next-hover.jpg) no-repeat center; } .de-page-mian .page-inner a.next:hover { background-color: #fff; border-color: #dddddd; } .de-page-mian .page-inner a.page-btn { font-size: 12px; margin-right: 0; width: 63px; margin-left: 10px; } .de-page-mian .page-inner span { display: block; font-size: 12px; color: #333; float: left; line-height: 26px; } .de-page-mian .page-inner input { display: block; float: left; height: 26px; width: 36px; border: 1px solid #dddddd; text-align: center; line-height: 26px; font-size: 14px; color: #333; margin: 0 5px; } /*内页-经典案例*/ .case-info{ width: 100%; position: relative; padding:3% 0; } .case-info ul li{ width: 23.5%; float: left; margin-right: 2%; margin-bottom: 2%; position: relative; height: 250px; transition: all .5s ease; } .case-info ul li:nth-child(4n){ margin-right: 0; } .case-img{ width: 100%; height: 100%; overflow: hidden; } .case-img img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: all .5s ease; } .case-tit{ position: absolute; bottom: 0; line-height: 50px; background: rgba(0,0,0,0.8); width: 100%; text-align: center; transition: all .5s ease; } .case-tit p{ color: #fff; } .case-tit span{ display: none; } .case-info ul li:hover .case-img img{ transform: scale(1.04); transition: all .5s ease; } .case-info ul li:hover .case-tit { background: rgba(218,5,2,0.8); } /*内页-新闻资讯*/ .newsBg{ padding: 3% 0; } .newsList li { padding: 35px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee } .newsList li a { position: relative; display: block; overflow: hidden; height: 100% } .newsImg { position: relative; float: right; overflow: hidden; width: 263px; height: 150px; } .newsImg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: all .5s ease } .newsTime { position: relative; float: left; padding-top: 15px; width: 230px; color: #333; font-size: 32px } .newsTime p i { display: inline-block; margin-left: 25px; width: 45px; height: 1px; background: #d2d2d2; vertical-align: middle; transition: all .5s ease } .newsIco { margin-top: 20px; width: 48px; height: 48px; background-image: url(../images/h-jt.png); background-position: center center; background-repeat: no-repeat; transition: all .5s ease; transition: all .5s ease } .newsText { margin-right: 270px; margin-left: 230px; max-width: 870px } .newsTit { margin: 15px 0 25px; color: #666; font-size: 20px; line-height: 26px; transition: all .5s ease; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .newsBrief { overflow: hidden; height: 52px; color: #666; font-size: 16px; line-height: 26px } .newsList li a:hover .newsImg img { transform: scale(1.1) } .newsList li a:hover .newsIco { background-color: #da0502; } /*联系我们*/ .de-contact { width: 100%; position: relative; } .de-contact .contact-list { width: 100%; padding: 3% 0 2% 0; } .de-contact .contact-list ul li { float: left; width: 23.5%; height: 50px; box-shadow: 0 0 5px #dcdcdc; margin-right: 2%; margin-bottom: 2%; word-wrap: break-word; text-align: center; padding: 20px 0 20px 0; } .de-contact .contact-list ul li:hover{ box-shadow: 0 0 5px #da0502; } .de-contact .contact-list ul li:last-child{ margin-right: 0; } .de-contact .contact-list ul li img{ display: block; margin: 0 auto; float: left; padding-left: 30px; padding-right: 20px; padding-top: 5px; } .de-contact .contact-list ul li span { display: block; color: #333; font-size: 16px; font-weight: bold; text-align: left; } .de-contact .contact-list ul li p{ font-size: 14px; text-align: left; } .contact-map { width: 100%; } .contact-map #dituContent { width: 100%; height: 475px; margin: 0 auto; } .de-message { overflow: hidden; padding-bottom: 3%; } .de-message .tips { text-align: center; } .de-message .tips h3{ font-size: 25px; color: #3c3c3c; font-weight: lighter; } .de-message .tips p{ font-size: 16px; color: #8b8b8b; font-weight: lighter; padding-top: 10px; } .de-message .mes-form { margin-top: 30px; } .de-message .mes-form .mes-input { display: block; width: 24%; float: left; margin-right: 1.32%; height: 38px; line-height: 38px; border: 1px solid #e6e6e6; box-sizing:border-box; margin-bottom: 20px; text-indent: 20px; } .de-message .mes-form .mes-input input{ display: block; width: 100%; height: 100%; text-indent: 20px; } .de-message .mes-form .mes-input:nth-child(4){ margin-right: 0; } .de-message .mes-form .form-tr textarea { display: block; width:100%; height: 168px; border: 1px solid #e6e6e6; line-height: 38px; text-indent: 20px; } .de-message .mes-form .form-tr .code { } .de-message .mes-form .form-tr .code input { width: 50%; line-height: 38px; border: 1px solid #e6e6e6; height: 38px; text-indent: 20px; float: left; } .de-message .mes-form .form-tr .code .verify { cursor: pointer; float: left; margin-left: 20px; width: 120px; height: 40px; line-height: 40px; text-align: center; font-size: 0; } .de-message .mes-form .form-tr .code .verify img { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; } .mes-center{ width: 510px; margin: 0 auto; } .de-message .mes-form .form-tr .submit { display: block; width: 190px; height: 40px; text-align: center; line-height: 40px; background: #da0502; color: #fff; font-size: 15px; float: right; } .de-message .mes-form .form-tr .submit:hover { background: #cc312e; } .de-message .mes-form .form-tr .error { height: 18px; line-height: 18px; font-size: 12px; color: #f00; padding: 0 5px; } /*产品详情*/ .other{ width: 100%; position: relative; padding: 3% 0; } .chanpin1{ margin-top: 3%; } .cp-dian{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px!important; } .cp-dian span{ width: 10px!important; height: 10px!important; margin-right: 5px; } .cp-dian .swiper-pagination-bullet-active{ background: #da0502!important; } /*内页-公共*/ .inner-right{ width: 100%; } .newsPage { padding: 12px 0; font-size: 14px; color: #323232; line-height: 30px; margin: 15px 0 30px; } .page-a{ display: block; border-bottom: 1px dashed #e9eaeb; line-height: 40px; } .newsPage a { color: #323232; } .newsPage a:hover { color: #ba0503; } /*案例详情*/ .case-info{ background: #fff!important; padding: 3% 0!important; } .incase-left{ width: 65%; float: left; position: relative; } .incase-left .swiper-slide{ height: 500px; } .incase-left img{ display: block; width: 100%; height: 100%; object-fit: cover; } .incase-next { right: 2%; background: url("../images/ban-next.png") no-repeat center center; width:42px!important; height: 42px!important; } .incase-prev { left: 2%; background: url("../images/ban-prev.png") no-repeat center center; width: 42px!important; height: 42px!important; } .incase-right{ width: 30%; float: right; } .case-detail{ padding: 20px 0; } .case-detail h3{ font-weight: bold; font-size: 20px; color: #da0502; line-height: 60px; margin-bottom: 20px; height: 59px; border-bottom: 1px solid #ededed; } .case-detail p{ font-size: 16px; line-height: 28px; } .incase-right h3{ font-weight: bold; font-size: 20px; color: #da0502; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #ededed; } .othercase ul li{ width: 100%; height: 265px; margin-bottom: 20px; } .incase-img{ width: 100%; height: 225px; } .incase-img img{ display: block; width: 100%; height: 100%; object-fit: cover; } .incase-tit{ line-height: 40px; text-align: center; color: #333; font-size: 16px; background: #eee; } .nav_all_menu{ display: none; } .all_menu_btn{ position: absolute; right: 0; top: 12px; width: 45px; height: 45px; border-radius: 30px; cursor: pointer; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .all_menu_btn span{ position: absolute; display: block; height: 3px; width: 30px; background: #fff; z-index:1000; -webkit-transition: all .3s cubic-bezier(.445,.05,.55,.95); -o-transition: all .3s cubic-bezier(.445,.05,.55,.95); -moz-transition: all .3s cubic-bezier(.445,.05,.55,.95); transition: all .3s cubic-bezier(.445,.05,.55,.95); } .all_menu_btn span:nth-child(1) { top: 0; } .all_menu_btn span:nth-child(2) { top: 10px; } .all_menu_btn span:nth-child(3) { top: 20px; } .all-menu{ position: fixed; width: 125px; top: 3%; right: -332px; z-index: 1000; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .navBg{ position: absolute; min-height: 250px; width: 100%; right: 0; top: 75px; z-index: 999; opacity: 0; transition: all .5s ease 0s; transform: translate(-100%,0); } .navBg li{ width: 100%; padding: 2% 5%; /*border-right: 1px solid rgba(255, 255, 255, 0.2);*/ /*border-bottom: 1px solid rgba(255, 255, 255, 0.2);*/ font-size:16px; } .navBg ul li a { color: #fff; } .navBg ul li.active a { color: #da0502; font-weight: bold; }