/* CSS Document */
#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: #fff; overflow: hidden;  }
#product .title2{text-align: center; color: #908e8e; font-size: 16px; margin-bottom: 2.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-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;}
/*ͷ����ʽ*/
.searchko{ float:right; margin-top:45px;}
.searchko p{ line-height:2; font-size:1em; color:#666; padding:0; margin:0;}
.searchko span{ font-size:2.2em; color:#ff2820;}
.topdfg{ width:80%; margin:0 auto;}
.topdfg h1,.topdfg p{line-height:2; font-size:1em; color:#666; padding:0; margin:0; float:left;}
/*�ײ���ʽ*/
.footrks{width:100%;overflow: hidden; background-color:#545c5e;}
.footrs{width:100%;overflow: hidden; padding:0 15%;}
.rngk{ float:left; width:22%; margin:1.5%;}
.rngk h4{color:#b3babc;line-height:2;font-size:1em;font-weight: bold;}
.rngk h4 i{ margin-right:10px;}
.footra,.foortb{}
.footra ul,.footrb ul{display: block;margin: 0px;padding: 0px;width: 100%;list-style-type: none;}
.footra ul li,.footrb ul li{ margin-left:20px;}
.footra ul li a,.footrb ul li a{ font-size:0.9em; color:#b3babc; line-height:2;}
.footrc p{ font-size:1em; color:#b3babc;}
.footrd p{ font-size:1.2em; color:#b3babc;}
.footrd span{ font-size:2em; color:#eee;font-weight: bold;}
.footrd img{ width:70%; margin:15px 15% 0;}
.foorfj {clear: both;width: 100%;}
.footr-foor{ width:100%;border-top: 1px solid #626869; padding:10px 0;}
.footr-foor p{font-size: 1em;color: #b3babc;text-align: center; line-height:2;}
.footr-foor p a{ color:#fff;}

@media (min-width:768px){
  #product .product-box{ background:#fdaba4; position:relative; color: #fff; }
  #product .product-box .movediv{     background: #b3babc url(../images/bg.jpg) repeat scroll 0 0; 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(179, 186, 188,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: #dedede;}
  #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; }
  #product .product-box .mypadding ul li{ font-size: 14px; }
  .rngk{ width:47%; }
}
@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; }  .rngk{ width:80%; margin:20px 10%;}}
@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:5px; 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: linear-gradient(to right, rgb(37, 214, 198) , rgb(11, 114, 241),rgb(53, 228, 212)); url(../images/bg.jpg) repeat;  color: #fff; }
#about p{  margin-bottom: 24px; text-indent: 2em; }
#about  a.more{ display:inline-block; background: #3fcdef; color: #fff; border-radius: 3px; padding: 5px 30px; margin: 3px 0; }
#about  a.more:hover{ background: #1998d6; text-decoration: none; }
#about .aboutdes{position: relative; padding-bottom: 2.57%;}
#about .aboutdes .abctitle{background: linear-gradient(to right, rgb(11, 114, 241),rgb(34, 212, 230)); color: #fff; font-size: 23px;width: 100%; height: 63px; line-height: 63px; }
@media (min-width:992px){
  #product{ padding-bottom: 2.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){
  .aboutpad{text-align: center;}
  .aboutpad p{text-align: left}
  #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; overflow: hidden;  border-top: 1px solid #dedede; overflow: hidden; }
#project .typename{font-size: 30px; margin-bottom: 30px;}
#project .typename span{color: #ff2820; 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: #ff2820; color: #fff; }
.more_moible{ margin-top:30px; height: 36px; border: 1px solid #e5e5e5; color: #4b4948; text-transform: uppercase; display: inline-block; line-height: 36px; text-align: center; border-radius: 5px; text-decoration: none; padding:0 15px;display:none}
@media (max-width:767px){#project .more{ margin-left: auto; margin-right: auto; display:none}
.more_moible{display:inline-block;}}
#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:#ff2820; color: #fff;}
#project .pjlist:hover span{background: #ff2820;}
#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;}
}
#video{ padding: 3.3% 0; background: #f2f2f2;}
#video .typename{background:#3fcdef; padding: 12px 26px; font-size: 20px; color: #fff; position: relative;}
#video .typename::before{ content: ""; position: absolute; border: 9px solid transparent; border-top-color:#3fcdef; margin-bottom:-18px; bottom:0;  }
#video .typename a.more{color: #fff; font-size: 12px; float: right; font-weight: normal; text-decoration: none;}
#video .typename a:hover.more{color: #3eb37d;}
#video .col-sm-4 .typename{background:#3fcdef; }
#video .col-sm-4 .typename::before{border-top-color:#3fcdef;}
#video .videocont{background: #fff; padding: 2.8%; }
#video .faqs{background: #fff; padding:2.8%;}
#video .faqlist{ border-bottom: 1px dashed #dedede; color: #a9a8a8; font-size: 12px; line-height: 20px; padding: 14px 15px 14px 30px;}
#video .faqlist::before{content:"\f1ea";font-family: "FontAwesome"; font-size: 16px; color: #1998d6; margin-left: -30px; position: absolute; }
#video .faqlist:last-child{border-bottom: none;}
#video .faqlist a{color: #4a4a4a; font-size: 14px;margin-bottom: 5px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis; display: block;}
#video #movie_player{width: 100%; height: 364px;}
@media (min-width: 768px) and (max-width: 991px){
#project .more{ margin-left: auto; margin-right: auto; display:none}
.more_moible{display:inline-block}
#video #movie_player{ height: 244px; }
#video .faqlist{ padding-top: 8px; padding-bottom: 9px; }
}
@media (min-width: 992px) and (max-width: 1199px){
#video #movie_player{height: 304px;}
#video .faqlist{ padding-top: 10px; padding-bottom: 9px; }
}
@media (max-width: 488px){
#video #movie_player{ height: 264px; }
}
#video .videomore{background: #f2f2f2; position: relative; overflow: hidden;z-index: 1; padding:7px ; color: #545353; font-size: 12px; margin-top: 10px; line-height: 20px;}
/*#video .videomore::after{ display: block;  bottom: 0;left:-18px;transform: skew(-30deg); position: absolute; content: ""; top: 0; width: 100%; z-index: -1;}*/
#video .videomore i{color: #1998d6; font-size: 38px; float: left; margin-right: 15px;}
#video .videomore a.more{ color: #20a567; padding-bottom: 12px;}
#video ul{list-style: none; margin: 0; padding: 0;}
#video ul li{padding-left: 15px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; padding-right: 5px; padding-top: 6px; padding-bottom: 6px;}
#video ul li:first-child{padding-top: 0;}
#video ul li a{color: #6d6d6d;}
#video a:hover,#video .videomore a:hover.more{ color: #1998d6; text-decoration: none; }
#video li::before{content:"\f0da";font-family: "FontAwesome"; margin-left: -15px;position: absolute;}
@media (max-width: 767px){
#video ul{margin-top: 15px;}
}
@media (min-width: 768px) and (max-width: 1199px){
  #video ul li{ font-size: 12px; padding-top: 2px; padding-bottom: 2px; }
  #video .videomore i{ font-size: 26px; }
}
@media (min-width: 1200px){
#video .videomore{ padding-left: 20%; }
#video .faqs{ height: 406px; }
}
#links{border-bottom: 1px solid #e8e8e8; padding: 1.6% 0;}
#links a{color: #aeaeae; font-size: 12px;}
#links a:hover{ color: #399f5f; }*/
#links{border-bottom: 1px solid #e8e8e8; padding: 1.6% 0;}
#links ul{margin: 0; padding: 0; list-style: none;}
#links ul li{margin-left: 5px; margin-right: 5px;}
#links ul li,#links b{float: left;}
#links a{color: #aeaeae; font-size: 12px;}
#links a:hover{ color: #399f5f; }