body{ margin:0px; padding:0px;}
a{ text-decoration:none;}
ul{ list-style:none; margin:0px; padding:0px;}
p{ margin:0px;}
.width{ width:1200px; margin:0 auto;}
.both{ clear:both;}
a{ color:#000; transition:0.5s;}
#box{ width:100%; position:relative; overflow:hidden; height:500px;}
#box img{ transition:0.3s; position:absolute; top:0px; left:0px; height:100%; width:100%; object-fit:cover;}
.arrow{width:100%;}
.arrow a{ position:absolute; top:45%; background-color:rgba(255,255,255,0.8);border-radius:50%; color:#333; font-size:24px; padding:10px 15px; opacity:0;}
#box:hover .arrow a{ opacity:1;}

#top{ background:#efefef; height:35px; line-height:35px; }
#top .p1{ font-size:12px; float:left; color:#403f3f;}
#top .p2{ font-size:12px; float:right; color:#403f3f;}

#logo{  padding:5px 0 10px; }
#logo .logo img{ float:left; width:320px; height:80px;  }

#logo .logo_right{ float:left; margin-left:30px; color:#666; font-size:18px; line-height:80px; width:300px; height:80px;}
#logo .logo_right b{ font-weight:100; color:#fabe00;}
#logo .tel{ float:right; height:80px; }
#logo .tel .p1{ font-size:14px; color:#666; line-height:40px;}
#logo .tel .p2{ font-size:26px; line-height:20px;}
#logo .tel .p2 a{ color:#fabe00;}
#logo .tel .p2 a:hover{ color:#c00;}

#nav{ background:rgb(43, 65, 164);}
#nav li{ float:left; height:50px; line-height:50px; color:#fff; text-align:center; font-size:14px; width:calc(100% / 8);}
#nav li a{color:#fff;}
#nav li:hover, #nav li.active{ background:#fabe00;}


#product{  padding:40px 0;}

#product .left{float:left; width:20%;}
#product .left .title{width: 100%;height: 140px;background: rgb(43, 65, 164);}
#product .left .title .p1	{width: 195px;margin:auto;padding-top: 38px;text-align: center;color: #fff;line-height: 30px;color: #fff;font-size: 30px;}
#product .left .title .p2{line-height: 30px;color: #fff;font-size: 14px;text-align: center;}


#product .left .dh{background: #fff;border: 8px solid rgb(43, 65, 164);padding: 10px 15px 30px 15px;}

#product .left .dh .p3{font-size:12px;line-height: 38px;padding-left:25px;margin-top: 19px;overflow:hidden;background: rgb(43, 65, 164)  url(../image/iconAdd.png) 150px center no-repeat;transition: all .5s;}

#product .left .dh .p3:hover{background-color: #fabe00;}

#product .left .dh .p3 a{display: block;color: #fff;font-size: 14px;font-weight: bold;}

#product .left .dh .p3 a:hover{color:#fff;font-size:14px;text-decoration:none;font-weight:bold;}

#product .left .contactn{width: 100%;height: 76px;background: rgb(43, 65, 164) url(../image/conleft3.png) 15px center no-repeat;float: left;padding-top: 34px;margin-top: 20px;}

#product .left .contactn .p3{color: #fff;line-height: 20px; margin-left:60px;}

#product .left .contactn .p4{color: #fff;line-height: 26px;font-size: 26px;font-family: arial;margin-left:55px;}

#product .left .product{ float:left; width:100%; margin-top:18px; }
#product .left .product img{ width:100%;   background:#fff; height:200px;}


#product  .p3 a:hover{ color:#3ac843;  }
#product .right .product:hover p a{ color:#fff; }
#product .right .product:hover img{border-color:rgb(43, 65, 164);background:rgb(43, 65, 164);}

#product .right{ float:right; width:78%; padding-top:0px;}

#product .right .con_tit{height: 25px;border-bottom: 2px solid rgb(43, 65, 164);padding: 0 10px 13px 0px; margin-bottom:15px;}

#product .right .con_tit p{float: left;padding-left: 8px;color: rgb(43, 65, 164);font-size: 22px;font-weight: bold;line-height: 25px;}

#product .right .con_tit span{color: #726f6f;font-size: 14px;font-family: arial;line-height: 25px;text-transform: uppercase;}

#product .right .con_tit .more{float: right;color: #666;line-height: 25px;}


#product .right .product{ float:left; width:calc(100% / 3 - 20px); margin:0 10px 20px; }
#product .right .product img{ width:calc(100% - 22px); border:1px solid #eee; padding:10px; background:#fff; height:280px;}
#product .right .product:hover{background:rgb(43, 65, 164); }
#product .right .product p{ line-height:200%; padding-left:5px; text-align:center;}
#product .right .product p a{ color:#5a5a5a;}
#product  .p3 a:hover{ color:#3ac843;  }
#product .right .product:hover p a{ color:#fff; }
#product .right .product:hover img{border-color:rgb(43, 65, 164);background:rgb(43, 65, 164);}



#about{  padding:40px 0; background:#d5f1fe;}
#about .title{ padding:15px 0; text-align:center;position:relative;}
#about  .title b{ font-size:36px; line-height:150%; position:relative; z-index:1; color:rgb(43, 65, 164);}
#about  .title span{     font-weight: bold; font-size: 36px; color: #fabe00;line-height: 10px; line-height:150%;}
#about .left{ float:left; width:50%;  margin-top:40px; background:rgb(43, 65, 164); height:450px;}
#about .left img{ height:80%; width:90%; padding:7% 5%;}
#about .right{ float:right; width:50%;   margin-top:40px; height:450px;}
#about .right .p1{  color:rgb(43, 65, 164);  margin:0 10px; font-size:24px; font-weight:600; text-align:center; line-height:200%;}
#about .right .p2{  line-height:200%; margin:0 20px;}
#about .right .p2 a{ display:inline-block; height:45px; width:130px; text-align:center; font-size:14px; line-height:45px; margin-right:10px; background:#d9d9d9; color:#666;}
#about .right .p2 .more{ background:#ff9900; color:#fff;}
#about .right .p2 a:hover{ background:#3ac843; color:#fff;}

#example{ padding:40px 0;}
#example  .title{ padding:15px 0; text-align:center;position:relative;}
#example   .title b{ font-size:36px; line-height:150%; position:relative; z-index:1; color:rgb(43, 65, 164);}
#example   .title span{     font-weight: bold; font-size: 36px; color: #fabe00;line-height: 10px; line-height:150%;}
#example .product{ float:left; width:calc(100% / 3 - 30px); margin:40px 10px; border:1px solid #ccc;}
#example .product:hover{border-color:rgb(43, 65, 164);}
#example .product img{ width:100%; height:260px; object-fit:cover;}
#example .product .p1{ text-align:center; font-weight:600; font-size:16px; line-height:40px; background:#fabe00;}
#example .product .p1 a{ color:#fff;}
#example .product:hover .p1{background:rgb(43, 65, 164);}


#news{ background:#d5f1fe; padding:40px 0;}
#news .title{ padding:15px 0; text-align:center;position:relative;}
#news   .title b{ font-size:36px; line-height:150%; position:relative; z-index:1; color:rgb(43, 65, 164);}
#news   .title span{     font-weight: bold; font-size: 36px; color: #fabe00;line-height: 10px; line-height:150%;}

#news .new_img{ float:left; width:calc(49% - 30px); margin-top:40px; padding:15px; background:rgb(43, 65, 164);}
#news .new_img img{ width:90%; height:300px; margin:0 5%;}
#news .new_img .p1{font-size:20px; font-weight:600; line-height:200%;  width:90%;  margin:0 5%;}
#news .new_img .p1	a{color:#fff;}
#news .new_img .p1:hover	a{color:#fabe00;}
#news .new_img .p3{font-size:14px; line-height:200%;  width:90%;  margin:0 5%;color:#fff;}
#news .new_img .p3	a{color:#fff;}
#news .new_img .p3:hover	a{color:#fabe00;}
#news .new_img .p2{font-size:16px; font-weight:600; line-height:200%;  width:90%;  margin:0 5%; text-align:right;color:#fabe00;}

#news .right{ float:right; width:calc(49% - 10px); margin-top:30px;  }
#news .right .product{ border:1px dotted #e2e2e2; margin-top:10px; background: #f2f2f2; border-radius:20px;}
#news .right .product .p1{ font-size:14px; font-weight:600; line-height:200%; width:90%; margin:0 5%; color:#999;text-align:right;}
#news .right .product .p2{  width:90%; margin:0 5%; }
#news .right .product .p2 a{ color:#2b41a4; font-size:20px; font-weight:600; line-height:200%;    }
#news .right .product:hover {background:#fabe00;}
#news .right .product:hover .p2 a{color:#fff;}
#news .right .product .p3{width:90%; margin:0 5%; line-height:200%;}
#news .right .product:hover .p1{color:#fff;}
#news .right .product:hover .p3{color:#2b41a4;}







#foot{ background:url(../image/top_bg.jpg);}
#foot .left{ float:right; margin-right:30px; padding:15px 30px; background:#2b41a4;}
#foot .left img{ width:190px; height:190px; margin-bottom:10px;}
#foot .left p{ text-align:center; line-height:200%; color:#fff; font-size:14px;}
#foot .right{ float:left; margin-top:60px; width:calc(100% - 280px);}
#foot .right .foot_daohang{ height:40px; line-height:40px; border-bottom:1px solid #777; margin-bottom:10px;}
#foot .right .foot_daohang a{ font-size:14px; color:#fff; width:calc(100% /9); text-align:center; display:inline-block;}
#foot .right p{ font-size:12px; color:#ccc; line-height:200%;}
#foot .right p a{ color:#ccc;}
#foot .right p a:hover{ color:#fff;}
#foot .right .foot_daohang a:hover{ color:#ff9900;}

#foot_nav{ display:none;}

@media screen and (max-width: 980px) {
*{-webkit-text-size-adjust:none;}
#box{ height:300px;}
.width{ width:100%;}
#logo .logo{ font-size:40px; line-height:60px; width:55%;}
#logo .logo img{width:100%;}
#logo .tel {display:none  !important;}
#logo .logo_right{ display:none;}
#nav li{width:calc(100% / 7); }
#nav a{ width:calc(100% / 7); font-size:12px;}
#top .p2{display:none;}
#product .left{ display:none;}
#product .right{ width:100%;}
#product .right .product{ width:calc(100% / 2 - 20px);}
#product .right .product p{ padding:0; text-align:center;}
#product .right .product img{height:200px;}
#about{height:650px;}
#about .left{ display:none;}
#about .right{ width:100%; margin-top:5px;}
#about .right .p2{ text-align:center;}
#example .descript{ margin-bottom:40px;}
#example .product{ width:calc(100% - 20px ); margin:10px;}
#example .product .p2{ height:0px;}
#news .new_img{width:100%; padding:0; margin-top:20px;}
#news .right{ width:90%; margin:20px 5% 0 5%;}
#news .right_bottom{ width:calc(100% - 30px);}

#foot{ padding:20px 0; margin-bottom:40px;}
#foot .left{ display:none;}
#foot .right{ margin-top:0; width:100%;}
#foot .right .foot_daohang a{ width:calc(100% / 7 - 6px);}
#foot_nav{ display:block; position:fixed; bottom:0px; width:100%; left:0px; z-index:100;  height:40px;}
#foot_nav li{ list-style:none;width:calc((100% - 16px) / 4); height:40px; display:inline-block; text-align:center;}
#foot_nav li a{ width:100%; text-align:center; height:40px; line-height:40px; background:#fabe00; color:#fff; float:left; font-size:20px;text-align:center;display:inline-block; }
 .index-banner .item .bg{object-fit:cover !important; height:369px !important;}
 .index-banner .item{height:369px !important;}
 .index-banner .shade{height:369px !important;}
 .toolbar{display:none;}
}
.toolbar{position: fixed;top: 50%;right: 1%;margin-top: -163px;z-index: 100;width: 80px;}

.toolbar dd{position: relative;float: left;width: 80px;height: 80px;background: #fabe00;margin-top: 2px;border-radius: 5px;color: #fff;font-size: 14px;line-height: 21px;text-align: center;cursor: pointer;transition: all .5s;}

.toolbar dd:first-child{margin-top: 0;}

.toolbar dd i{width: 100%;height: 30px;display: block;margin-top: 13px;background: url(../image/toolbar.png) no-repeat center 0;}

.toolbar dd.qq i{background-position-y: 0;}

.toolbar dd.tel i{background-position-y: -30px;}

.toolbar dd.code i{background-position-y: -60px;}

.toolbar .on i{background-position-y: -90px;}

.toolbar dd span{display: block;color: #fff;}

.toolbar dd.tel .box{position: absolute;top: 0;width: 190px;right: -200px;height: 100%;margin-right: 10px;border-radius: 5px;background: #fabe00;opacity: 0;transition: all .5s;}

.toolbar dd.tel .box p{font-size: 14px;margin: 15px auto 7px;}

.toolbar dd.tel .box h3{font-size: 18px;font-weight: bold;}

.toolbar dd.tel .box:after{display: block;content: " ";border-style: solid dashed dashed dashed;border-color: transparent  transparent transparent #fabe00;border-width: 9px;width: 0;height: 0;position: absolute;top: 50%;margin-top: -9px;right: -18px;margin-left: -12px;}

.toolbar dd.code .box{position: absolute;top: 0;width: 162px;right: -172px;height: 162px;margin-right: 10px;border-radius: 5px;background: #fabe00;opacity: 0;transition: all .5s;}

.toolbar dd.code .box img{width: 140px;height: 140px;padding: 11px;}

.toolbar dd.code .box:after{display: block;content: " ";border-style: solid dashed dashed dashed;border-color: transparent  transparent transparent #fabe00;border-width: 9px;width: 0;height: 0;position: absolute;top: 30px;right: -18px;margin-left: -12px;}

.toolbar dd:hover{background: rgb(43, 65, 164);}

.toolbar dd.tel:hover .box{opacity: 1;right: 80px;}

.toolbar dd.code:hover .box{opacity: 1;right: 80px;}
.toolbar dd.tel h3{color:#fff; font-weight:600;}