body {margin:0; font-size:14px; font-family:'Medium','Microsoft YaHei','lucida Grande',verdana; line-height:23px;color:#333; min-width: 1300px;}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, img, fieldset, input, p, blockquote, table, th, td, embed, object {padding:0; margin:0;}
ul,li {list-style:none;}
h1, h2, h3, h4, h5, h6 {font-size: 1.0em;}  
.clear,.cl{clear: both;} 
img{border: none; border-radius: 5px;}
a{text-decoration: none; color: #111111}
.fl{float: left;}
.fr{float: right;}
.w1300{ width: 1300px; margin: 0 auto }
.w980{ width: 980px; margin: 0 auto }


.menu{}
.menu ul li{height: 100px; line-height: 100px; float: left; padding:0px 10px; border-top:2px solid #FFF;}
.menu ul li a{font-size: 18px; display: block;}
.menu ul li:hover{border-top:2px solid #df251b;}

.active{ border-top:2px solid #df251b !important; }
.active a{ color: #df251b; }
.search{ margin-top: 30px; margin-left: 30px; width: 215px;  }
.search_input{ height:40px; width: 154px; padding-left: 10px; line-height: 40px; color: #999999; border-radius: 20px 0px 0px 20px; border:1px solid #999999;  border-right: none; }
.submit_input{ width: 50px; height: 42px; background: url(search_input.jpg) no-repeat center center ;  border-radius: 0px 20px 20px 0px; border:1px solid #999999; border-left: none; }


.banner{ background: url(banner.jpg) no-repeat top center; height: 900px; }
.banner_case{ height: 600px; background: url(banner_case.jpg) no-repeat center top; }
.banner_about{ height: 600px; background: url(banner_about.jpg) no-repeat center top; }
.banner_contact{ height: 600px; background: url(banner_contact.jpg) no-repeat center top; }
.banner_news{ height: 600px; background: url(banner_news.jpg) no-repeat center top; }



.about_l{ width: 590px; }
.about_l01{ font-size: 30px; font-weight: bold; }
.about_l02{ font-size: 24px; margin: 30px 0px; }
.about_l03{ font-size: 16px; color: #666666; line-height: 30px; }

.about_l06{  }
.about_l06 ul li{  float: left; text-align: center; color: #666666; font-size: 16px; margin-right: 110px; }
.about_l06 ul li span{ font-size: 60px; color: #f63f2d }
.about_r{ margin-top: 35px }



.c_title01{ font-size: 30px; font-weight: bold; }
.c_title02{ font-size: 24px; margin: 15px 0px; font-weight: 500 }

.product{ background: #f8f8f8; padding: 40px 0px; }
.product01_r{margin-top: 10px;}
.product01_r ul li{ font-size: 16px; float: left; }
.product01_r ul li a{ font-size: 16px; color: #999999; display: block; padding: 5px 10px; border:1px solid #999999; margin-left: 15px; border-radius: 5px; }
.product01_active a{border:1px solid #df251b !important; background: #df251b !important; color: #FFF !important;  } 


.product02{ width: 1300px; overflow: hidden; }
.product_list{ width: 1400px }
.product_list ul li{ width: 413px;/* height: 460px;*/ float: left; margin-right: 30px; }
.product_list ul li img{ width: 413px; height: 300px; }
.product_list ul li p a{font-size: 16px; font-weight: bold; text-align: center; display: block; line-height: 70px;}


.case{ padding: 40px 0px; }
.case01_r{margin-top: 10px;}
.case01_r ul li{ font-size: 16px; float: left; }
.case01_r ul li a{ font-size: 16px; color: #999999; display: block; padding: 5px 10px; border:1px solid #999999; margin-left: 15px; border-radius: 5px; }
.case01_active a{border:1px solid #df251b !important; background: #df251b !important; color: #FFF !important;  } 

.news02_l{ width: 400px; height:518px; float: left; }
.news02_m{ float: left;  margin-left:20px; }
.news02_m ul li{ width: 390px; height: 210px; background: #FFF; padding: 20px;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear }
.news02_m ul li:hover{ background: #e67015; color: #fff}
.news02_m ul li:hover .news02_m02 , .news02_m ul li:hover span, .news02_m ul li:hover .news02_m03_l, .news02_m ul li:hover .news02_m02  { color: #fff}
.news02_m ul li:hover .news02_m02  {  border-bottom: 1px solid #fff}
.news02_m ul li:hover .news02_m03_r  {  background: url(ico07_hover.png) no-repeat top  center; }

.news02_r ul li:hover{ background: #e67015; color: #fff}
.news02_r ul li:hover .news02_m02 , .news02_r ul li:hover span, .news02_r ul li:hover .news02_m03_l, .news02_r ul li:hover .news02_m02, .news02_r ul li:hover .news02_r03, .news02_r ul li:hover .news02_r01   { color: #fff}
.news02_r ul li:hover .news02_m02  {  border-bottom: 1px solid #fff}
.news02_r ul li:hover .news02_m03_r  {  background: url(ico07_hover.png) no-repeat top  center; }
.news02_r ul li:hover .news02_r04{ color: #fff}



.news02_m01{ font-size: 18px; font-weight: bold; margin-bottom: 20px; }
.news02_m01 a:hover{ color: #f63f2d  }

.news02_m02{ color: #666666 ; height: 100px; border-bottom: 1px solid #c2c2c2 }
.news02_m03{ padding-top: 20px; }
.news02_m03_l{  font-size: 24px; color: #666666; width: 70px; text-align: center; }
.news02_m03_l span{  font-size: 14px; color: #666666; display: block; }
.news02_m03_r{ width: 26px; height: 23px; background: url(ico07.png) no-repeat top  center;  }
.news02_m03_r ul li{ width: 390px; height: 210px; background: #FFF; padding: 20px }

.news02_r{ float: left; margin-left: 20px; }
.news02_r ul li{ padding: 20px; background: #FFF; width: 390px; height: 120px; margin-bottom: 20px }
.news02_r01{  font-size: 24px; color: #666666; width: 90px; text-align: left;height: 120px; float: left; border-right: 1px solid #c2c2c2; text-align: center; }
.news02_r01 span{  font-size: 14px; color: #666666; display: block; }

.news02_r02{ width: 270px;   }
.news02_r03{  font-size: 18px; color: #111111; font-weight: bold; margin-bottom: 20px; }
.news02_r04{ color: #666 }

.contact{ background: url(ico08.jpg) no-repeat center top; height:795px; padding: 30px 0px;  }
.contact01{ font-size: 30px; color: #FFF; display: block; text-align: center; }
.contact01 span{ font-size: 24px; color: #FFF; display: block; text-align: center; margin: 20px 0px; }




.contact02_l{ width: 570px; float: left; }
.contact02_l01{ color: #FFF; font-size: 16px; }
.contact02_l02{ margin:30px 0px;  }
.contact02_l02_l,.contact02_l02_r{ width: 228px; height: 120px; background: #dfdcda; border-radius: 5px; padding: 20px; text-align: center; }
.contact02_l03{ background: #dfdcda; height: 71px; padding: 20px; border-radius: 5px; }
.cc00{}
.cc01{ font-size: 18px; color: #111111; }
.cc02{ font-size: 16px; color: #666666; }
.cc03{ font-size: 18px; color: #111111; float: left; }
.cc04{ font-size: 18px; color: #666666; float: left; margin-top: 20px; margin-left: 20px; }
.cc04 span{ font-size: 18px; color: #111111; }

.contact02_r{ width: 480px; height: 476px; padding: 30px; background: #f8f8f8; border-radius: 10px; }
.online_input{ border:1px solid #999999; height: 50px; display: block; margin-bottom: 30px; border-radius: 10px; font-size: 16px; width: 96%; padding:5px 2%; background: #f8f8f8 }
.online_textarea{ border:1px solid #999999; height: 160px; display: block; width: 96%; padding:5px 2%; border-radius: 10px; font-size: 16px; margin-bottom: 30px; background: #f8f8f8 }
.online_submit{ background: #df251b; color: #FFF; height: 60px; line-height: 60px; text-align: center; border-radius: 10px; }

.bottom{ background: #272a2e; padding: 20px 0px; }

.bottom01{ font-size: 16px; color: #FFF; height: 90px; line-height: 90px; border-bottom: 1px solid #404855; }
.bottom01 a{ font-size: 16px; color: #FFF; }

.bottom02{ margin-top: 20px; }
.bottom02_l01{ font-size: 16px; color: #FFF; margin-bottom: 20px; }
.bottom02_l01 a{ font-size: 16px; color: #FFF; }





.case_menu{ padding-top: 160px; }
.case_menu ul{ margin-bottom: 10px; }
.case_menu ul li{ padding: 5px 8px; }
.case_menu ul li a{ color: #FFF; }
.case_menu01{ float: left; color: #FFF; background: #111111 }
.case_menu02{ float: left; }

.c_address{ position: absolute; color: #FFF; margin-top: -100px; height: 60px; line-height: 60px; border-bottom: 1px solid #FFF; width: 1300px;}
.c_address a{  color: #FFF; }
.c_address02{ height: 60px; line-height: 60px; }


.case_list ul li{  width: 423px; float: left; margin-right: 17px; margin-bottom: 17px;  }
.case_list ul li p{ height: 65px; line-height: 65px; text-align: center; }
.case_list ul li p a{ font-size: 16px; color: #111111  }



.view_l{ width: 600px; height: 690px; }

.view_r{ width: 500px; height: 690px; }
.view_r01{ font-size: 36px;font-weight: 400; line-height: 50px; border-bottom: 1px solid #999999; padding: 20px 0px; }
.view_r02{ padding: 40px 0px;  border-bottom: 1px solid #999999;}
.view_r02 ul li{ width: 50%; float: left; line-height: 30px;  }


.view_r03{ margin: 20px 0px; }
.view_r03_l{ padding: 10px 20px; font-size: 18px; background: #999999; color: #FFF; border-radius: 5px; margin-left: 50px; }
.view_r03_r{ padding: 10px 20px; font-size: 18px; background: #f63f2d; color: #FFF; border-radius: 5px; margin-left: 50px; }


.view_r04{ font-size: 14px; color: #999999 }
.view_r04 span{ color: #f63f2d }

.view_info01{ padding: 10px 0px; border-bottom: 1px solid #999999; font-size: 18px; }
.view_info02_l{ width: 900px; }
.view_info02_l img{ display: block; }
.view_info02_r{  padding: 20px 30px; background: #f2f2f2; }
.view_info02_r ul li{ border-radius: 10px; margin-bottom: 20px; }
.view_info02_r ul li img{float: left; }
.view_info02_r ul li p{ line-height: 67px; text-align: center; background: #FFF;  }
.view_info02_r ul li p a{color: #111111; font-size: 16px }

.banner_about01{ font-size: 30px; color: #FFF; text-align: center; }
.banner_about02{ font-size: 16px; color: #FFF; text-align: center; margin-top: 20px; }



.c_address03{ float: left; }
.c_address04{ float: right; }
.c_address04 a{ display: inline-block; margin-left: 20px; font-size: 18px; }
.c_address04_active{ color: #f63f2d !important }
.company_culture{ background: url(ico17.jpg) no-repeat center top; height: 700px;  }

.company_culture01_l{ font-size: 16px; color: #FFF; }
.company_culture01_r{ font-size: 16px; color: #FFF; }

.development_path{ height: 600px; }
.enterprise_honor{ background: url(ico19.jpg) no-repeat center top; height: 700px; }
.enterprise_honor01 ul li{ float: left;margin-right: 9px; }
.enterprise_honor01 ul li p{ font-size: 16px; color: #FFF; margin-top: 20px; text-align: center; }


.contact_l06 ul li{ float: left; width: 230px; height: 230px; text-align: center; background: #e8e8e8; margin-left: 110px; padding: 20px  }
.contact_l06 ul li div{ padding-top: 30px }
.contact_l06 ul li p{ font-size: 24px; margin-top: 20px; line-height: 30px; word-wrap:break-word; }



.news_list li{ padding:50px 0px; border-bottom: 1px solid #999999;  }
.news_list_l{ width: 240px; height: 160px; float: left; margin-left: 40px; }
.news_list_m{  margin-left: 40px; width: 780px; }
.news_list_m01{ font-size: 24px; line-height: 60px; }
.news_list_m02{ font-size: 16px; color: #666666 }
.news_list_r{  margin-left: 40px; width: 130px; text-align: left; color: #999999; padding-top: 30px;  line-height: 30px }
.news_list_r span{ color: #df251b; font-size: 30px; padding-top: 20px;display: block; text-align: left; }


.page{padding: 20px 0px; text-align: center;}
.page div a{ display: inline-block; border:1px solid #dedede; padding: 5px 10px; margin-left: 10px; }
.page div span{ display: inline-block; border:1px solid #dedede; padding: 5px 10px; margin-left: 10px; }
.page div .current{ border:1px solid rgb(255, 0, 20); color: rgb(255, 0, 20); }


.proLi{ position:relative; overflow:hidden;width: 423px;  }
.porTbox{ position:relative; overflow:hidden; width:423px; height:300px; }
.proImg{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; transition:all .5s ease; }
.porBbox{ position:relative; overflow:hidden; width:100%; height:65px; line-height: 65px;border: 1px solid #f2f2f2; text-align: center;  }
.proTitle{ font-size:1rem; color:#333; overflow:hidden; text-overflow:ellipsis; position:relative; white-space:nowrap; width:100%; }
.proSummry{ color:#666; white-space:normal; overflow:hidden; margin:10px 0; text-overflow:ellipsis; line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; max-height:65px; height:auto; }
.lookDetail{ position:relative; display:none; color:#777; height:38px; line-height:38px; border-top:1px solid #e5e5e5; }
.arrowsR{ position:absolute; top:50%; right:0px; transform:translate(0, -50%); width:30px; }
.arrowsR img{ position:absolute; transition:all .5s ease; }
.harr{ opacity:0; }
.showBox{ position:absolute; top:0px; left:0px; width:100%; height:100%; opacity:0; background:rgba(0,0,0,.6); transition:all 0.5s ease; }
.showBoxLink{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:block; width:60%; color:#fff; text-align:center; font-size:1rem; padding:0.5rem 0; }
.showBoxLink::before{ content:''; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:60%; height:1px; background:#fff; transition:all .5s ease; }
.showBoxLink::after{ content:''; position:absolute; bottom:0px; left:50%; transform:translateX(-50%); width:60%; height:1px; background:#fff; transition:all .5s ease; }
.lookDetail:hover .barr{ opacity:0; }
.lookDetail:hover .harr{ opacity:1; }
.proLi:hover .showBox{ opacity:1; }
.proLi:hover .proImg{ transform:translate( -50% ,-50%) scale(1.1); }
.proLi:hover .showBoxLink::before{ width:1rem; }
.proLi:hover .showBoxLink::after{ width:1rem; }

 /*效果一：360°旋转 修改rotate(旋转度数)*/
.xiaoguo1 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}

.xiaoguo1:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}

/*效果二：放大 修改scale(放大的值)*/
.banner_icp_t,.xiaoguo2 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}

.banner_icp_t:hover,.xiaoguo2:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
}

/*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/
.xiaoguo3 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}

.xiaoguo3:hover {
transform: rotate(360deg) scale(1.2);
-webkit-transform: rotate(360deg) scale(1.2);
-moz-transform: rotate(360deg) scale(1.2);
-o-transform: rotate(360deg) scale(1.2);
-ms-transform: rotate(360deg) scale(1.2);
}
/*效果四：上下左右移动 修改translate(x轴,y轴)*/
.xiaoguo4 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.xiaoguo4:hover {
transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
}

/*自下而上*/
.xiaoguo5{
width:100px;
height:100px;
background:red;
position:absolute;
animation:myfirst 5s;
-webkit-animation:myfirst 1s;
animation-fill-mode: forwards;
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:500px; bottom:50px;}

100% {background:red; left:500px; height:210px;bottom:50px;}
}





/*按钮动画*/
.button-jittery,.ljzx {
  animation: jittery 3s infinite;
}
.button-jittery:hover,.ljzx:hover {
  animation: heartbeat 0.75s infinite;
}

.button__wrapper {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.button-pulse button {
  background: var(--bg-color);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.button-pulse .button__wrapper:hover .pulsing:before {
  animation: pulsing 0.2s linear infinite;
}
.button-pulse .button__wrapper:hover .pulsing:after {
  animation: pulsing1 0.2s linear infinite;
}
 
.pulsing {
  width: 99%;
  height: 99%;
  border-radius: 50px;
  z-index: 1;
  position: relative;
}
.pulsing:before, .pulsing:after {
  width: 100%;
  height: 100%;
  border: inherit;
  top: 0;
  left: 0;
  z-index: 0;
  background: #fff;
  border-radius: inherit;
  animation: pulsing 2.5s linear infinite;
}
.pulsing:after {
  animation: pulsing1 2.5s linear infinite;
} 
 
@keyframes jittery {
  5%,
  50% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.9);
  }
  15% {
    transform: scale(1.15);
  }
  20% {
    transform: scale(1.15) rotate(-5deg);
  }
  25% {
    transform: scale(1.15) rotate(5deg);
  }
  30% {
    transform: scale(1.15) rotate(-3deg);
  }
  35% {
    transform: scale(1.15) rotate(2deg);
  }
  40% {
    transform: scale(1.15) rotate(0);
  }
}
@keyframes heartbeat {
  50% {
    transform: scale(1.1);
  }
}