/* 
* @Author: sublime text
* @Date:   2019-06-09 14:34:01
* @Last Modified by:   sublime text
* @Last Modified time: 2019-06-20 11:57:01
*/

/*幻灯片*/
#banner{width:100%;height: 600px;}

/*产品中心*/
#chanp{width: 100%;margin-top:70px; }
#chanp .title{text-align: center;font-size: 18px;color: #333;position: relative;}
#chanp .title p{font-size: 40px;color: #dd2821;font-weight: bold;padding-top: 20px;letter-spacing: 0.5px;}
#chanp .title i{font-style: normal;font-size: 60px;color: #e6e6e6;position: absolute;top: 0;z-index: -1;left: 40%;}
#chanp .neirong{width: 100%;height: 638px;background: url(../image/chanp_bg.png)no-repeat center;margin-top: 45px;}


#chanp .neirong .wrap{width: 500px;float: right;padding-right: 80px;padding-top: 32px;}
#chanp .neirong .wrap h5{font-size: 36px;font-weight: bold;color: #323232;}
#chanp .neirong .wrap hr{width: 72px;height: 3px;border: none;background:#323232;margin:38px 0;}
#chanp .neirong .wrap p{font-size: 18px;color: #323232;padding-bottom: 10px;}
#chanp .neirong .wrap span{font-size: 10px;color: #cccccc;}

.bg04_switch_box_wrap{height:220px;}
.bg04_switch_btn{width:417px;height:91px;background:url(../image/dao.png) center top no-repeat;margin-top: 50px;}
.bg04_switch_btn a{width:139px;height:91px;line-height:140px;float:left;text-align:center;color:#fff;font-size:18px;}
.bg04_switch_btn a:hover,.bg04_switch_btn a.active{color:#fff;}
.bg04_switch_btn .a1:hover,.bg04_switch_btn .a1.active{background:url(../image/dao_bg.png) 0px top no-repeat;}
.bg04_switch_btn .a2:hover,.bg04_switch_btn .a2.active{background:url(../image/dao_bg.png) -139px top no-repeat;}
.bg04_switch_btn .a3:hover,.bg04_switch_btn .a3.active{background:url(../image/dao_bg.png) -278px top no-repeat;}


/*关于警示灯*/
#about{width: 100%;height: 854px;background: url(../image/about_bg.jpg)no-repeat center; }
#about .title{text-align: center;font-size: 18px;color: #333;position: relative;}
#about .title p{font-size: 40px;color: #dd2821;font-weight: bold;padding-top: 20px;letter-spacing: 0.5px;z-index: 2;position: relative;}
#about .title i{font-style: normal;font-size: 60px;color: #e6e6e6;position: absolute;top: 0;z-index: 1;left: 40%;top:60px;}

#about .neirong .left{width: 468px;height: 469px;background: url(../image/yiwen.png)no-repeat center;float: left;}
#about .neirong .left .zuo{float: left;width: 160px;}
#about .neirong .left .you{float: right;}
#about .neirong .left li{font-size: 22px;color: #333333;line-height:82px;width: 160px;padding-left: 60px;}
#about .neirong .right{width: 649px;height: 532px;float: right;}

#about .neirong p{font-size: 32px;color: #333;font-weight:bold;letter-spacing: 0.5px;text-align: center;margin-top: 80px;}
#about .neirong a{font-size: 18px;color: #fff;text-align: center;display: block;width: 235px;height: 48px;margin: 0 auto;margin-top: 40px;}

 /*警示灯供应商*/

#gong{width: 100%;margin-top: 60px;}
#gong .title{text-align: center;font-size: 18px;color: #333;position: relative;}
#gong .title p{font-size: 40px;color: #dd2821;font-weight: bold;padding-top: 20px;letter-spacing: 0.5px;z-index: 2;position: relative;}
#gong .title i{font-style: normal;font-size: 60px;color: #e6e6e6;position: absolute;top: 0;z-index: 1;left: 40%;}
.shangj{width: 100%;height: 786px;background: url(../image/shangj_bg.jpg)no-repeat center; }


.bg03_switch_btn{width:1200px;height:148px;margin-top: 50px;}
.bg03_switch_btn a{width:240px;height:148px;float:left;text-align:center;color:#292929;font-size:22px;line-height: 25px;padding-top: 25px;}
.bg03_switch_btn a i{font-size: 12px;display: block;text-transform: uppercase;}
.bg03_switch_btn a:hover,.bg03_switch_btn a.active{color:#fff;}
.bg03_switch_btn .a1:hover,.bg03_switch_btn .a1.active{background:url(../image/shagj_nav.jpg) 0px top no-repeat;}
.bg03_switch_btn .a2:hover,.bg03_switch_btn .a2.active{background:url(../image/shagj_nav.jpg) -960px top no-repeat;}
.bg03_switch_btn .a3:hover,.bg03_switch_btn .a3.active{background:url(../image/shagj_nav.jpg) -480px top no-repeat;}
.bg03_switch_btn .a4:hover,.bg03_switch_btn .a4.active{background:url(../image/shagj_nav.jpg) -720px top no-repeat;}
.bg03_switch_btn .a5:hover,.bg03_switch_btn .a5.active{background:url(../image/shagj_nav.jpg) -215px top no-repeat;}
.bg03_switch_box .left{width: 400px;float: left;margin-top: 100px;height: 321px;}

.bg03_switch_box .left .zuo{width: 66px;height:100px;float: left;background: url(../image/01_bg.png);font-size: 33px;color: #fff;line-height: 80px;text-align: center;margin-right: 20px;}
.bg03_switch_box .left .you{font-size: 12px;color: #fff;text-transform: uppercase;font-style: italic;}
.bg03_switch_box .left .you p{font-size: 24px;color: #fff;font-weight: bold;padding-left: 20px;line-height: 35px;font-style: normal;padding-bottom: 10px;}
.bg03_switch_box .left hr{width: 213px;height: 1px;border: none;background:#fff;margin-top: 20px;}
.bg03_switch_box .left .xia{font-size: 16px;color: #fff;line-height: 30px;padding-top: 25px;}
.bg03_switch_box .left .xia a{width: 135px;height: 40px;line-height: 40px;text-align: center;display: block;color: #fff;border:#ccc 1px solid;margin-top: 30px;}

.bg03_switch_box .right{float: right;margin-top: 80px;}
.bg03_switch_box .dianwa{width: 326px;height: 40px;line-height: 40px;background: url(../image/dianwa_bg.png)no-repeat center;margin: 0 auto;margin-top: 60px;color: #fff;text-align: center;font-size: 21px;}


/*产品中心*/

.lanrenzhijia{width: 1200px;margin:0 auto;height: 680px;position: relative;}
.lanrenzhijia .tab{width: 1200px;height: 98px;background: url(../image/cp_bg.jpg)no-repeat center;float: left;position: absolute;z-index: 2;bottom: 0;}

.lanrenzhijia .tab a{display:block; float:left; text-decoration:none; color:#fff; height:56px; line-height:90px; width:200px; text-align:center; font-size:20px;}

.lanrenzhijia .tab a.on{ background:url(../image/cphover_bg.png)no-repeat top; display:block; float:left; text-decoration:none; color:#fff; height:98px; line-height:90px; width:200px; text-align:center; font-size:20px;}

.lanrenzhijia .content{ overflow:hidden; width:1200px;height:550px;position:absolute; float:left; margin-top:10px;}
.lanrenzhijia .content .ul{ position:absolute; left:0; top:0; width:1200px;}
.lanrenzhijia .content .li{ width:1200px; float:left;}

.lanrenzhijia .content .shang{width:1200px;float: right;padding-top: 45px;}
.lanrenzhijia .content .shang .zuo{width: 600px;overflow: hidden;float: left;border:1px solid #808080;height: 467px;}

.lanrenzhijia .content .shang .you{width: 560px;float: right;}

.lanrenzhijia .content .shang .you p{color:#333;font-size: 28px;font-weight: bold;padding-top: 28px;}

.lanrenzhijia .content .shang .font{color:#616161;font-size: 15px;line-height: 26px;padding-top: 28px;}
/*.lanrenzhijia .content .shang a{width: 120px;height: 40px;line-height: 40px;text-align: center;color: #fff;border-radius: 40px;display: block;background: #dc2821;font-size: 16px;margin-top: 40px;}*/
.lanrenzhijia .content .shang .font ol{font-size:16px;color:#343434;line-height: 40px;}
.lanrenzhijia .content .shang .font .zuob{width: 300px;float: left;}


.bg01,.bg02,.bg03,.bg04,.bg05,.bg06{width:100%;height:500px;position:relative;margin-top: 30px;}

.info_box_pic_box_wrap{margin-top:20px;}

.info_box_pic_box{width:480px;height:150px;overflow:hidden;text-align:center;position:relative;left: 45px;z-index: 101;}
.info_box_pic_box img{transition:0.3s;}
.info_box_pic_box .swiper-slide{width:148px;height:160px;}
.info_box_pic_box .swiper-slide a{width:148px;height:115px;display:block;border:1px solid #808080;color:#4d4d4d;position:relative;margin-bottom:5px;overflow:hidden;}
.info_box_pic_box .swiper-slide a:hover{border:1px solid #dc2821;}
.info_box_pic_box .swiper-slide a:hover img{transform:scale(1.05);}
.info_box_pic_box .swiper-slide img{display:block;width:100%;margin:0 auto;height:100%;transition:0.3s;}
.info_box_pic_box .swiper-slide p{width:100%;font-size:18px;color:#323232;text-align:center;line-height: 45px;}
.swiper-slide:hover.swiper-slide h6{color:#267ba0;}
.info_box_pic_box_more_btn{width:100%;text-align:center;margin:30px 0;}
.info_box_pic_box_more_btn a{display:inline-block;padding:12px 60px;background:#dc2821;color:#fff;font-size:18px;line-height: 35px;}
.info_box_pic_box_more_btn a:hover{background:#323232;}

.product_box_pic_box_pnbtn{position: absolute;top: 40px;z-index: 99;width:560px;height: 39px;overflow: hidden;}

.product_box_pic_box_pnbtn a:hover img{margin-top: -39px;}


/*切面设计*/
#qiem{width: 100%;height: 746px;background: url(../image/qie_bg.jpg)no-repeat center;margin-top: 70px;}
#qiem .title{text-align: center;font-size: 18px;color: #fff;position: relative;}
#qiem .title p{font-size: 40px;color: #dd2821;font-weight: bold;padding-top: 20px;letter-spacing: 0.5px;z-index: 2;position: relative;}
#qiem .title i{font-style: normal;font-size: 60px;color: rgba(127,127,127,0.2);position: absolute;top: 0;z-index: 1;left: 40%;top:60px;}
#qiem .neirong{margin-top: 50px;}
#qiem .neirong .right{width: 570px;float: right;}
#qiem .neirong .right p{font-size: 44px;font-family: "宋体";font-weight: bolder;color: #dd2821;border-bottom:2px solid #dd2821;width: 180px; padding-bottom: 30px;padding-top:30px;}
#qiem .neirong .right .font{font-size: 16px;color: #fff;line-height: 35px;padding-top: 30px;}
#qiem .neirong .right a{width: 162px;height: 46px;line-height: 48px;text-align: center;color: #dd2821;border:1px solid #dd2821;display: block;font-size: 16px;float: right;margin-top: 40px;}


.images {
  cursor: pointer;
}
.images:hover .image:nth-child(4) {
  -moz-transform: rotate(10deg) translateX(50px);
  -ms-transform: rotate(10deg) translateX(50px);
  -webkit-transform: rotate(10deg) translateX(50px);
  transform: rotate(10deg) translateX(50px);
}
.images:hover .image:nth-child(3) {
  -moz-transform: rotate(3deg) translateX(75px);
  -ms-transform: rotate(3deg) translateX(75px);
  -webkit-transform: rotate(3deg) translateX(75px);
  transform: rotate(3deg) translateX(75px);
}
.images:hover .image:nth-child(2) {
  -moz-transform: rotate(-2deg) translateX(-50px);
  -ms-transform: rotate(-2deg) translateX(-50px);
  -webkit-transform: rotate(-2deg) translateX(-50px);
  transform: rotate(-2deg) translateX(-50px);
}
.images:hover .image:first-child {
  -moz-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
  -ms-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
  -webkit-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
  transform: rotate(-8deg) translateX(-75px) translateY(-10px);
}

.htmleaf-container{position: relative;width: 540px;}
.image {
  position: absolute;
  top: 185px;
  left: 10%;
  height: 393px;
  width: 540px;
  margin-top: -110px;
  margin-left: -105px;
  border: 5px solid #fff;
  border-bottom-width: 15px;
  -moz-box-shadow: 0 2px 5px rgba(30, 30, 30, 0.25);
  -webkit-box-shadow: 0 2px 5px rgba(30, 30, 30, 0.25);
  box-shadow: 0 2px 5px rgba(30, 30, 30, 0.25);
  z-index: 2;
  -moz-transition: -moz-transform 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}
.image:first-child {
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -webkit-transform: rotate(18deg);
  transform: rotate(18deg);
}
.image:nth-child(2) {
  -moz-transform: rotate(12deg);
  -ms-transform: rotate(12deg);
  -webkit-transform: rotate(12deg);
  transform: rotate(12deg);
}
.image:nth-child(3) {
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.image:nth-child(4) {
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.image:last-child {
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.image.slide-right {
  -moz-transform: rotate(290deg) translateX(250px);
  -ms-transform: rotate(290deg) translateX(250px);
  -webkit-transform: rotate(290deg) translateX(250px);
  transform: rotate(290deg) translateX(250px);
}
.image.slide-left {
  -moz-transform: rotate(-290deg) translateX(-250px);
  -ms-transform: rotate(-290deg) translateX(-250px);
  -webkit-transform: rotate(-290deg) translateX(-250px);
  transform: rotate(-290deg) translateX(-250px);
}
.image.back {
  z-index: 1;
}


/*安全品质*/

#anq{width: 100%;margin-top: 80px;height: 600px;}
#anq .title{text-align: center;font-size: 18px;color: #333;position: relative;}
#anq .title p{font-size: 40px;color: #dd2821;font-weight: bold;padding-top: 20px;letter-spacing: 0.5px;z-index: 2;position: relative;}
#anq .title i{font-style: normal;font-size: 60px;color: #e6e6e6;position: absolute;top: 0;z-index: 1;left: 40%;}

#anq .neirong{width: 100%;height: 266px;background: url(../image/pinz_bg.jpg)no-repeat center;margin-top: 60px;}

#anq .neirong li{width: 152px;float: left;text-align: center;font-size: 20px;color: #333;margin-right: 22px;}
#anq .neirong li img{border: 4px solid #fff;border-radius: 50%;box-shadow: 0px 12px 24px 0px rgba(15, 14, 13, 0.1);}
#anq .neirong li:last-child{margin-right: 0px;}
#anq .neirong li .circle{width: 35px;height: 35px;background: #fff;border-radius: 50%;font-size: 20px;color: #333;margin: 0 auto;margin-top: 35px;}
#anq .neirong li:hover img{border: 4px solid #dd2821;}
#anq .neirong li:hover{color: #dd2821;}
#anq .neirong li:hover .circle{color: #dd2821;}
#anq .neirong a{width: 225px;height: 45px;line-height: 45px;text-align: center;background: #dd2821;display: block;text-align: center;color: #fff;margin: 0 auto;border-radius: 50px;font-size: 20px;margin-top: 40px;}

/*匠心汇聚*/
#jiangx{width: 100%;height: 600px;background: url(../image/jiangx_bg.jpg)no-repeat center;}
#jiangx .title{text-align: center;font-size: 18px;color: #fff;position: relative;}
#jiangx .title p{font-size: 40px;color: #dd2821;font-weight: bold;padding-top: 20px;letter-spacing: 0.5px;z-index: 2;position: relative;}
#jiangx .title i{font-style: normal;font-size: 60px;color: #6e6e6e;position: absolute;top: 0;z-index: 1;left: 40%;top:60px;}

.ser_con{width: 1202px;margin:0 auto;height: 274px;background: url(../image/biaoz_bg1.png)no-repeat center;}

.ser_con ul{width: 1200px;margin: 0 auto;margin-top: 70px;}

.ser li{float: left;width: 200px;text-align: center;height: 120px;margin-top: 15px;position: relative;}
.ser li span{ display:block;width:72px; height:72px;  margin:13px auto 17px;  position:relative;}
.ser li span em{position:absolute;width:100%;height:100%;background: #ededed;border-radius: 50%;top:0;left:0;-webkit-transform: translateX(0) rotate(0deg);transform: translateX(0) rotate(0deg);-webkit-transition: all 0.35s ease-out;transition: all 0.35s ease-out;}
.ser li span i{position:absolute;width:100%;height:100%;background: #dc2821;border-radius: 50%;top:0;left:0;opacity:1;visibility:hidden;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transition: all 0.1s ease 0.2s;transition: all 0.1s ease 0.2s;}
.ser li:hover span em,.ser li.cur span em{opacity: 0;visibility:hidden;-webkit-transform: translateX(100%) rotate(180deg);transform: translateX(100%) rotate(180deg);}
.ser li:hover span i,.ser li.cur span i{visibility:visible;opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.ser li b{display:block;font-size: 16px;color: #fff;line-height: 25px;font-weight: normal;}
.ser li:hover b,.ser li.cur b{color: #dc2821;font-size: 16px;}
.ser li:hover:after,.ser li.cur:after{position: absolute;width: 13px;height: 8px;content: "";/*background:url(../images/voice/san4.png) no-repeat;*/top: 104px;left: 50%;margin-left: -7px;}
.ser .tel{font-size: 14px;color: #333;line-height: 14px;padding-top: 18px;}
.ser .tel strong{display:block;font-size: 24px;color: #333;line-height: 30px;}
.ser .tel .zx{display: block;width: 95px;height: 35px;line-height: 35px;text-align: center;font-size: 14px;color: #333;background: #fff;border-radius: 17px;margin:4px auto 0;}
.ser li.bt:hover:after,.ser li.bt.cur:after{top: 0;/*background:url(../images/voice/san5.png) no-repeat;*/}
.ser_con{position: relative;}
.ser_bd{position: absolute !important;width: 100%;left: 0;top: 137px;z-index: 10;}
.ser_bd p{font-size: 22px;color: #191717;line-height: 24px;text-align: center;line-height: 28px;margin-top: 40px;}
.ser_bd p a{font-weight: bold;color:#dc2821;padding-left: 5px;padding-right: 5px;}

/*定制呈现*/

#dingz{width: 100%;margin-top: 80px;}
#dingz .title{text-align: center;font-size: 18px;color: #333;position: relative;}
#dingz .title p{font-size: 40px;color: #dd2821;font-weight: bold;padding-top: 20px;letter-spacing: 0.5px;z-index: 2;position: relative;}
#dingz .title i{font-style: normal;font-size: 60px;color: #e6e6e6;position: absolute;top: 0;z-index: 1;left: 40%;}
#dingz .bottom{ width: 1200px; margin:auto;margin-top: 60px;}	
#dingz .bottom .list li{float: left;width: 584px;text-align: center;}
#dingz .bottom .list li div{height: 50px;line-height: 50px;}
#dingz .bottom .list li div a{font-size: 20px;float: left;width: 80%;text-align: left;}
#dingz .bottom .list li div a i{font-size: 14px;}
#dingz .bottom .list li div span{border:1px solid #bfbfbf;width: 25px;height: 25px;border-radius: 100%;float: right;line-height: 25px;text-align: center;display: block;margin-top: 10px;}
#dingz .bottom .list li hr{width: 280px;height: 4px;background: #bfbfbf;border: none;transition:1s;}
#dingz .bottom .list li:hover hr{width: 584px;background: #dc2821;}
#dingz .bottom .list li:hover a{color: #dc2821;}
#dingz .bottom .list li:hover span{color: #dc2821;border:1px solid #dc2821;}

#dingz .bottom .hd{ margin-top:40px;}
#dingz .bottom .hd ul{ height:12px; text-align:center;}
#dingz .bottom .hd ul li{ display:inline-block; *display:inline; *zoom:1; float:none; width:12px; height:12px; margin:0 10px; border-radius:12px; background:#c8c8c8;}
#dingz .bottom .hd ul li.on{ background:#dc2821; width:26px}
#dingz .zixun{width: 400px;height: 50px;line-height: 50px;text-align: center;background: #dd2821;border-radius: 40px;display: block;text-align: center;color: #fff;margin: 0 auto;margin-top: 50px;font-size: 18px;}