@charset "utf-8";
/* CSS Document */
#banner{max-height: 685px; overflow: hidden;}
#banner ul{list-style: none; margin: 0; padding: 0;}
#banner .bx-controls-direction a{background: url(../images/arrow.png) no-repeat; width: 35px; height: 64px;opacity: 0.7;}
#banner .bx-controls-direction a.bx-prev{ left: -80px; }
#banner .bx-controls-direction a:hover.bx-prev,#banner .bx-controls-direction a:hover.bx-next{opacity: 1;}
#banner .bx-controls-direction a.bx-next{background-position: -35px top;right: -80px;}
#banner .bx-wrapper:hover .bx-controls-direction a.bx-prev{left:30px;}
#banner .bx-wrapper:hover .bx-controls-direction a.bx-next{right:30px;}
#banner .bx-wrapper{overflow: hidden;}
#search{ padding: 10px 0; font-size: 12px; }
#search a{color: #666666; padding: 0 5px;}


#product{ padding:2.96% 0 6.19%; background: #e0e1e3; overflow: hidden;  }
#product .title2{text-align: center; color: #908e8e; font-size: 12px; margin-bottom: 3.6%;}
#product .tit-name,#project .tit-name,#services .tit-name{font-size: 30px; color: #5a6162; font-weight: bold; text-align: center;  margin-bottom:8px;}
#product .product-box{ margin-bottom: 30px; }
#product .product-box .pro-mar{ margin: 0; }
#product .product-box .pro-mar .col-sm-6{ padding: 0; }
#product .product-box .mypadding{padding-top: 20px; }
#product .product-box .mypadding .title{ padding-left: 20px; padding-right: 20px; color: #575a63; font-family:Times New Roman; font-size: 18px;  margin-bottom: 20px; display: block; line-height: 20px; text-transform: uppercase; }
#product .product-box .mypadding .title a{color: #fff;}
#product .product-box .mypadding p{ line-height: 18px; font-size: 12px; margin-bottom: 20px; padding-left: 20px; padding-right: 20px;}
#product .product-box .mypadding ul{ margin: 0; padding: 0; list-style: none; }
#product .product-box .mypadding ul li{line-height: 18px;font-size: 12px; }
#product .product-box .mypadding ul a{ color: #575a63;  padding: 4px 20px;  display: block; }

#product .product-box .mypadding i{padding-right: 5px;}

@media (min-width:768px){
  #product .product-box{ background:#45B058; position:relative; color: #fff; }
  #product .product-box .movediv{ background:#545f61; width: 50%; height: 100%; position: absolute; left: 50%; top: 0; transition:all 0.3s ease;}
  #product .product-box:hover .movediv{ left: 0; z-index: 5;  display: block; background: rgba(86,96,97,0.6); }
  #product .product-box:hover .movediv::before{content:"\f0c1"; position: absolute; left: 50%; top: 50%; font-family: FontAwesome; color: #fff; font-size: 32px;margin-left: -12px; margin-top: -12px;}
  #product .product-box .mypadding .title{color: #fff;}
#product .product-box .mypadding ul a:hover{ text-decoration: none; background: #54cd6a;}
  #product .product-box .mypadding ul a{ color: #fff; }
}
@media (max-width:767px){
  #product .tit-name,#project .tit-name,#services .tit-name{  font-size: 24px;}
  #product .product-box{ position:relative;}
  #product .product-box .movediv{ position: absolute; top: 0; z-index: 5;}
  #product .product-box .mypadding{ text-align: center; }
  #product .product-box .mypadding .title a{ color:#505050; }
  #banner .bx-wrapper .bx-pager{display: none;}
}
@media (min-width:450px) and (max-width:767px){#product .product-box .movediv{ width: 420px; height:423px; margin-left: -210px;left:50%; }}
@media (max-width:449px){#product .product-box .movediv{ width: 390px; height:392px; }}
@media (min-width:768px) and (max-width:991px){#product .product-box{ margin-bottom: 40px; }}
@media (min-width:992px) and (max-width:1200px){
  
  #product .product-box .mypadding .title{ font-size: 14px;margin-bottom:8px; padding-left: 10px; padding-right: 10px;}
  #product .product-box .mypadding p{margin-bottom:1px; padding-left: 10px; padding-right: 10px;}
  #product .product-box .mypadding ul li{ font-size: 12px;  padding: 0; }
  #product .product-box .mypadding{ padding: 12px 0;  }
}

#about{ background: #545f61;  color: #fff; padding-bottom: 1.8%; }
#about p{  margin-bottom: 24px;}
#about  a.more{ display:inline-block; background: #45B058; color: #fff; border-radius: 3px; padding: 5px 30px; margin: 3px 0; }
#about  a.more:hover{ background: #009946; text-decoration: none; }
#about .aboutrow{margin:10px -5px; }
#about .aboutrow .col-xs-6{padding-left: 5px; padding-right: 5px;}
#about .aboutdes{position: relative; padding-bottom: 2.57%;}
#about .aboutdes .abctitle{  background: #45B058; color: #fff; font-size: 30px;width: 100%; height: 63px; line-height: 63px; }
@media (min-width:992px){
  #product{ padding-bottom: 6.5%; }
  #about .aboutdes{ padding-left: 0; padding-top: 2.57%; }
  #about .aboutdes .abctitle{position: absolute;top: -63px; padding-left: 10.1%;}
  #about .aboutpad{ padding-left: 10.1%; }
  #about .video{ padding-right: 0; }
  #about .videodiv{ position: relative; width: 570px; }
  #about .video .videoimg{ position: absolute; left: 0; top: -63px;width: 570px;}
}
@media (max-width:991px){
  #about .aboutdes .abctitle{ text-align: center; margin-bottom: 15px; font-size: 23px; height: 50px; line-height: 50px;} 
}
@media (min-width:992px) and (max-width:1200px){
  #about .videodiv,#about .video .videoimg{ width: 470px; }
  #about .aboutdes .abctitle{ font-size: 26px; height: 50px; line-height: 50px;top: -50px;} 
  #about .video .videoimg{top: -50px;}
}
@media (min-width:571px) and (max-width:991px){
#about .videoimg{max-width: 570px; margin-left: auto; margin-right: auto;}
}

#project{ padding: 3.91% 0 2.1%; overflow: hidden;  border-top: 1px solid #dedede; overflow: hidden; }
#project .typename{font-size: 30px; margin-bottom: 30px;}
#project .typename span{color: #45B058; font-weight: bold;}
#project p{ color: #6d6d6d; }
#project .more{ margin-top:30px; width: 104px; height: 36px; border: 1px solid #e5e5e5; color: #4b4948; text-transform: uppercase; display: block; line-height: 36px; text-align: center; border-radius: 5px; text-decoration: none; }
#project  a:hover.more{ background: #45B058; color: #fff; }
@media (max-width:767px){#project .more{ margin-left: auto; margin-right: auto; }}
#project .pjlist{ position: relative; display: block; color: #4b4948; text-decoration: none; }
#project .pjlist span{ display: block; padding: 8px 10px; font-size: 13px; line-height: 18px; text-transform: capitalize; background: #545c5e; color: #fff;}
#project .pjlist:hover span{background: #45B058;}
/*#project .pjlist::before{ position: absolute; content: ""; width: 0; height: 0; border:7px solid transparent; overflow: hidden; border-top-color: #28a7e6; left: -7px; bottom:-7px; transform: rotate(45deg);}*/
#project .pjimg{ display: block; position: relative; overflow: hidden;  }
#project .pjimg::before{ z-index: 2; transform: scale(0); width: 100%; height:100%; left: 0; top: 0; position: absolute; content: "";  background: rgba(0,0,0,.5);transition:all 0.3s ease;opacity:0;}
#project .pjimg::after{z-index: 3;transform: scale(0);content:"\f065"; font-family: FontAwesome; color: #fff; font-size: 28px; top: 50%; left: 50%; position: absolute; margin-left: -10px; margin-top: -10px; transition:all 0.3s ease;opacity: 0;}
#project .pjlist:hover .pjimg::before{ transform: scale(1);opacity: 1; }
#project .pjlist:hover .pjimg::after{transform: scale(1);opacity: 1;}
#project a:hover.pjlist{ background: #28a7e6; color: #fff; }
#project .pjlist img{transition:all 0.3s ease; z-index: 1;}
/*#project a:hover.pjlist img{ transform: scale(1.2); }*/
@media (max-width:991px){
#project .pjlist{  margin-top: 30px;}
}

#news{ padding:2.1% 0 3.3%; background: #f2f2f2;}
#news .typename{background: #45B058; padding: 12px 26px; font-size: 20px; color: #fff; position: relative;}
#news .typename::before{ content: ""; position: absolute; border: 9px solid transparent; border-top-color:#45B058; margin-bottom:-18px; bottom:0;  }
#news .col-sm-5 .typename{background:#515b5d; }
#news .col-sm-5 .typename::before{border-top-color:#515b5d;}
#news .videocont{background: #fff; padding: 2.8%; }
#news .videocont .nlist{padding: 9px 0;}
#news .videocont .nlist .title{color: #4a4a4a; margin-bottom: 5px; font-size: 14px; font-weight: bold; text-transform: capitalize; display: block;}
#news .videocont .nlist a:hover.title{color: #45B058;}
#news .videocont .nlist p{color: #8d8c8c;}
#news .cecont{padding:30px 15px; background: #fff; text-align: center;}


#news .videomore{background: #f2f2f2; position: relative; overflow: hidden;z-index: 1; padding:7px ; color: #545353; font-size: 12px; margin-top: 10px; line-height: 20px;}
/*#news .videomore::after{ display: block;  bottom: 0;left:-18px;transform: skew(-30deg); position: absolute; content: ""; top: 0; width: 100%; z-index: -1;}*/
#news .videomore i{color: #45B058; font-size: 38px; float: left; margin-right: 15px;}
#news .videomore a.more{ color: #20a567; padding-bottom: 12px;}
#news ul{list-style: none; margin: 0; padding: 0;}
#news ul li{padding-left: 15px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; padding-right: 5px; padding-top: 6px; padding-bottom: 6px;}
#news ul li:first-child{padding-top: 0;}
#news ul li a{color: #6d6d6d;}
#news a:hover,#news .videomore a:hover.more{ color: #45B058; text-decoration: none; }
#news li::before{content:"\f0da";font-family: "FontAwesome"; margin-left: -15px;position: absolute;}
@media (max-width: 767px){
#news ul{margin-top: 15px;}
#news .videocont .nlist{text-align: center;}
#news .videocont .nlist .col-sm-4 img{max-width: 420px; margin-bottom: 7px;}
}
@media (min-width: 768px) and (max-width: 1199px){
  #news ul li{ font-size: 12px; padding-top: 2px; padding-bottom: 2px; }
  #news .videomore i{ font-size: 26px; }
}
@media (min-width: 1200px){
#news .videomore{ padding-left: 20%; }
#news .faqs{ height: 406px; }
}