@charset "utf-8";
/* CSS Document */

html,h1{ width:100%; padding:0; margin:0; display:block;}
body{   padding:0; margin:0; display:block;}
body,textarea,input,select,option{font-size:12px;color:#333;font-family:"微软雅黑", "Microsoft YaHei","Verdana","Arial","Helvetica",sans-serif;}

body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,textarea,input,select,option,form{margin:0 auto;}
th,td,ul,ol,textarea,input,select,option{padding:0}
a{text-decoration:none;color:#333}
a,textarea,input{outline:none}
a:hover{text-decoration:none}
textarea{overflow:auto;resize:none}
table{border-collapse:collapse}
li{list-style:none}
a img{border:none}
body{background-color:#fff}
.fl{float:left}
.fr{float:right}
.q:after { content: '\20'; clear: both; display: block; }
.q{zoom:1}
.clear{clear:both;height:0;overflow:hidden}
.clears:before,.clears:after{content:'';display:table}
.clears:after{clear:both}
.clears{zoom:1}
.img img{display:block}
label,label input{vertical-align:middle}
.btn{cursor:pointer;border:none}
.rel{position:relative}
.abs{position:absolute}
body{background-color:#fff; max-width:800px; min-width:320px; margin:0 auto; position:relative; }
.center{
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
text-align: center;
}
.center1{
/* Firefox */
display:-moz-box;

-moz-box-align:center;

/* Safari、Opera 以及 Chrome */
display:-webkit-box;

-webkit-box-align:center;

/* W3C */
display:box;

box-align:center;
text-align: center;
}
.center2{
/* Firefox */
display:-moz-box;
-moz-box-pack:center;


/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-pack:center;
text-align: center;


/* W3C */
display:box;
box-pack:center;


}

.gap{ padding-top: 4%; }
.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

}

.show{ display: block; }
.none{ display: none; }

.top_wrap{ padding-top:17.8125%; position: fixed; top: 0; left: 0;  z-index: 1001;  width: 100%; background: #fff;
-moz-box-shadow:0px 2px 20px #333333; -webkit-box-shadow:0px 2px 20px #333333; box-shadow:0px 2px 20px #333333;

 }
.logo{ width:82.1875%; position: absolute; top: 0; left: 0; height: 100%; }
.logo a{ display: block; width: 100%; height: 100%; }
.logo a img{ width: 100%; }

.menu{ width: 17.8125%; top: 0; right: 0; height: 100%; position: absolute; }
.menu img{ width: 100%; }




.end_wrap{ padding-top:22%; position: relative;   width: 100%; background: #0077cb;}
.end_wrap div{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.end_text{ font-size: 12px; color: #fff; position: absolute; width: 100%; height: 100%;  top: 0; left: 0; line-height: 20px; }
.top_gap{ padding-top: 17.8125%; }
.end_gap{ height: 60px;  }

/*移动即时*/
.top_bar { position: fixed; z-index: 1001; bottom: 0; left: 0; right: 0; margin: auto;}
.top_menu { display:-webkit-box;  display: block; 
  width: 100%; background: rgba(255, 255, 255, 0.7); height: 48px;
  display: -webkit-box; display: box; margin:0; padding:0; -webkit-box-orient: horizontal; 
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#0077cb), to(#0077cb), color-stop(60%, #0077cb));
   }
.top_bar .top_menu>li { -webkit-box-flex:1; position:relative; text-align:center; }
.top_menu li:first-child { background:none; }
.top_bar .top_menu>li>a { height:48px; margin-right: 1px; display:block; text-align:center; color:#FFF; text-decoration:none; text-shadow: 0 1px rgba(0, 0, 0, 0.3); -webkit-box-flex:1; }
.top_bar .top_menu>li.home { max-width:70px }
.top_bar .top_menu>li.home a { height: 60px; width: 60px; margin: auto; border-radius: 60px; position: relative; top: -14px; background: url('../images/home.png') no-repeat center center; background-size: 100% 100%; }
.top_bar .top_menu>li>a label { overflow:hidden; margin: 0 0 0 0; font-size: 12px; display: block !important; line-height: 18px; text-align: center; }
.top_bar .top_menu>li>a img { padding: 3px 0 0 0; height: 24px; width: 24px; color: #fff; line-height: 48px; vertical-align:middle; }
.top_bar li:first-child a { display: block; }
.menu_font { text-align:left; position:absolute; right:10px; z-index:500; 
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#524945), to(#48403c), color-stop(60%, #524945)); border-radius: 5px; width: 120px; margin-top: 10px; padding: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); }
.top_bar .top_menu>li>a:hover, .top_bar .top_menu>li>a:active { background-color:#333; }
.litype{width:58px;}


.pro_title{ padding-top: 3%; font-size: 16px; color: #515252;  text-align: center; }
.pro_titleen{ padding-top: 1%; padding-bottom: 1%; font-size: 14px; color: #0077cb; text-align: center; }
.img_sep img{ width: 100%; }

.pro_wrap{ padding-top: 68.75%; position: relative;  width: 100%;}


.banner_wrap{ padding-top:51.25%; width: 100%; background: url("../images/banner.jpg") no-repeat;
 background-size: contain; }

.pro1{ width: 42.96875%; height:96%; position: absolute; top:2%; left: 5.3125%; }
.pro2{ width: 42.96875%; height:96%; position: absolute; top:2%; right: 5.3125%;  }

.imga{ display: block; width: 100%; height: 82%;  border: 1px solid #dcdcdc; }
.imga img{ width: 100%; height: 100%; }
.texta{  width: 100%; height: 18%; font-size: 12px; color: #333;  overflow: hidden;


}
.ellipsis{text-overflow:ellipsis;
white-space: nowrap;
word-wrap: break-word;overflow: hidden;}

.pro_more{ width:100%; padding-top: 10%; position: relative; }
.more_a{ height: 60%; width: 20%; left: 40%; position: absolute;  font-size: 12px; 
top: 20%; background: #0077cb;color: #fff;
 }

 .case_wrap{ padding-top: 70%; position: relative; width: 100%; background: #0077cb; }
.case_wrap2{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



.menu_div{
  position: fixed; width: 60%; height: 100%; right: -60%; top:0;
z-index: 1001; 
  -webkit-transition:  right 0.35s ease-in 100ms;
  transition: right 0.35s ease-in 100ms;

}
.active_wrap .menu_div2{
  height:100%;
 width: 100%;

}

 .menu_div2{ 
   width: 100%; height: 100%; 
z-index: 1002;
  background: rgba(0,0,0,0.9);

}


.menu_mask{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1003;
  }
.menu_list{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1004; }

.menu_list a{ font-size: 16px; color: #fff; height: 42px; width: 80%; display: block;
 line-height: 42px; text-align: center;  margin:0 10%;
 background: url("../images/line_01.png") bottom repeat-x;
-webkit-transform: translateY(-42px);
  transform: translateY(-42px);
  -webkit-transition: opacity 0.35s ease-out, -webkit-transform 0.35s ease-out;
  transition: opacity 0.35s ease-out, transform 0.35s ease-out
opacity: 0;

}




.active_wrap2 .menu_list a:nth-child(2){
  -webkit-transition-delay: 300ms, 300ms;
  transition-delay: 300ms, 300ms
}
.active_wrap2 .menu_list a:nth-child(3){
  -webkit-transition-delay: 350ms, 350ms;
  transition-delay: 350ms, 350ms
}
.active_wrap2 .menu_list a:nth-child(4){
  -webkit-transition-delay: 400ms, 400ms;
  transition-delay: 400ms, 400ms
}
.active_wrap2 .menu_list a:nth-child(5){
  -webkit-transition-delay: 450ms, 450ms;
  transition-delay: 450ms, 450ms
}
.active_wrap2 .menu_list a:nth-child(6){
  -webkit-transition-delay: 500ms, 500ms;
  transition-delay: 500ms, 500ms
}
.active_wrap2 .menu_list a:nth-child(7){
  -webkit-transition-delay: 550ms, 550ms;
  transition-delay: 550ms, 550ms
}
.active_wrap2 .menu_list a:nth-child(8){
  -webkit-transition-delay: 600ms, 600ms;
  transition-delay: 600ms, 600ms
}
.active_wrap2 .menu_list a:nth-child(9){
  -webkit-transition-delay: 650ms, 650ms;
  transition-delay: 650ms, 650ms
}


.active_wrap2 .menu_list a{
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: none;
  transform: none
}

.case_list{ width: 100%; height: 57.8%;  position: absolute; bottom: 8%; left: 0%;  }
.case_left{ width:7.1875%; height: 100%; position: absolute; left: 0; top: 0;   }
.case_left img{ width: 100%; height: 100%; }
.case_right{ width:7.1875%; height: 100%; position: absolute; right: 0; top: 0;   }
.case_right img{ width: 100%; height: 100%; }

.company_text{ padding-bottom: 2%; width:92%; margin: 0 auto; font-size: 12px; color: #7f7f7f; line-height: 20px;}
.company_text img{ width: 100%; }

.sort_wrap{ padding-top: 10%; position: relative; width: 100%; }
.sort_wrap2{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.sort_wrap2 span{ width: 30%; height: 60%; top:20%; left: 2.5%; position: absolute;  font-size: 12px;
color: #4c4c4d; border: 1px solid #bebebe;
  }
  .sort_wrap2 span.span_active{ background: #0077cb; border: 1px solid #0077cb; color: #fff; }

.news_wrap9{ width: 96%;  position: relative;  padding-top: 28.125%; margin:0 auto;}

.news_total{ padding-top:114.4%; width: 100%; position: relative; }

  .imga3{ width:30.7%; height: 84%; position:absolute; top: 0; left: 0; border:1px solid #d0d0d0; padding: 2px; }
  .imga3 img{ width: 100%; height: 100%; }
  .news_wrap2{ width: 68%; height: 84%; position: absolute; top: 0; right: 0; overflow: hidden; }
  .news_title{ height: 27.5%;  text-align: left; overflow: hidden;  

}
  .news_title a{ font-size: 12px; color: #333;  }
  .news_date{ height: 20.5%; overflow: hidden; font-size: 12px; color: #b1b1b1; }
  .news_desc{ height:52%; line-height: 19px; font-size: 12px; color: #b1b1b1; overflow: hidden; }


  .cus_wrap{ padding-top: 16.875%; width: 100%; position: relative; }
  .cus_wrap a{ border: 1px solid #d1d1d1;position: absolute; display: block; width: 27%; height: 77.8%;top: 11.1%; }
    .cus_wrap a img{ width: 100%; height: 100%;}
  .cus_a1{   left: 5.45%; 

  }
    .cus_a2{   left: 36.5%;

  }
    .cus_a3{   left: 67.55%;  

  }

  .asort_w{ width: 100%; padding-top: 10%; position: relative; border-top:1px solid #d9d9d9; }
  .asort_w div{ width: 50%; height: 100%; position: absolute; top: 1px; background: #f7f9fa;
    border-bottom: 1px solid #d9d9d9; }
  .asort_left{  left: 0;  border-right: 1px solid #d9d9d9; }
  .asort_right{ left: 50%;  }
    .asort_w div.asort_active{   background: #0077cb;}
     .asort_w div.asort_active a{ color: #fff; }

  .asort_w2{ width: 100%; padding-top: 10%; position: relative; border-top:1px solid #d9d9d9; }
  .asort_w2 div{ width: 100%; height: 100%; position: absolute; top: 1px; background: #f7f9fa;
    border-bottom: 1px solid #d9d9d9; }

    .asort_w2 div.asort_active{   background: #0077cb;}
     .asort_w2 div.asort_active a{ color: #fff; }

    .about_title{ font-size: 20px; font-weight: bold; text-align: center; color: #0077cb; line-height: 28px; }
.about_img img{ width: 100%; }


.swiper-container2{ width:100%; height:100%; position:relative; overflow:hidden; z-index:10;}
     
   
.swiper-container2 .swiper-slide{
        text-align: center;
        font-size: 18px;
       

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    position:relative;
    width:100%;
    height:100%;
}


.swiper-container2 .swiper-slide div{
  width:27%;
  display:block;
  height:100%;
  top:0;
  position:absolute;
  
}
.imga4{ width: 100%; display: block; height: 86%; display: block; overflow: hidden; border:2px solid #fff; }
.imga4 img{ width: 100%; height: 100%; }
.texta4{  width: 100%; display: block; height: 20.6%; display: block; overflow: hidden;
font-size: 12px; color: #fff; line-height: 26px;
}
.swiper-container2 .swiper-slide div:nth-child(1){
  left:7%;
  
  
}

.swiper-container2 .swiper-slide div:nth-child(2){
  left:36.5%;
  
  
}
.swiper-container2 .swiper-slide div:nth-child(3){
  left:66%;
  
  
}

.about_detail{ width: 96%; margin:0 auto; line-height: 22px;  }
.about_detail img{ width: 100%; }

.ajax_more img{width:100%;}

/*返回、项目名称及下级菜单*/
.backhomebg{background:#0077cb; max-width:640px; margin:0 auto; height:40px; clear:both;}
.backhomebg .title{width:80%; float:left; font-family:"微软雅黑";color: #ffffff;font-size: 16px; line-height:40px; height:40px; font-weight:bold; text-align:center;}
.backhomebg .biao{ width:10%; padding-top:5px; text-align:center; float:left;}

/*新闻页*/
.news_lr{width:96%;margin:0 auto; padding-bottom:10px;padding-top:15px;overflow:hidden; clear:both;}
.news_lr .title{width:100%; color:#555555;font-weight:bold; font-family:"微软雅黑"; font-size:18px; line-height:18px; text-align:center;}
.news_lr .protitle{background: url(../images/xxt.gif) repeat-x bottom; width:100%; color:#555555;font-weight:bold; font-family:"微软雅黑"; font-size:18px; line-height:18px; padding-bottom:15px; padding-top:15px; text-align:center;}
.news_lr .hit{background: url(../images/xxt.gif) repeat-x bottom; width:100%; color:#999999;font-size:12px; padding-top:10px; padding-bottom:10px; text-align:center;}
.news_lr .Source{color:#FF0000;}
.news_lr .newsdl{width:100%; line-height:1.8; padding-top:10px;}
.news_lr .newsdl img{max-width:100%; margin-top:5px; margin-bottom:5px; height: inherit;}

.newsupdn{background: url(../images/xxt.gif) repeat-x top; width:96%; margin:0 auto; padding-top:10px; padding-bottom:10px; overflow:hidden; clear:both;}
.newsupdn li{ max-width:615px; height:24px; padding-left:5px; overflow:hidden;}
.newsupdn li a{text-decoration:none; color:#ff6600;}
.newsupdn li a:hover{text-decoration:underline; color:#333333;}



/*  */
.product_wrap{
                width: 96%;
                margin:0 auto;
            }
            .product_wrap a{
                width: 49%;
                padding-top: 63%;
                display: block;
                position: relative;
                


            }
            .product_wrap a:nth-child(2n){
                float: right;
            }
            .product_wrap a:nth-child(2n+1){
                float: left;
            }
            .product_wrap a .imga{
                width: 100%;
                height:85% ;
                position: absolute;
                left: 0;
                top: 0;
                box-sizing: border-box;
                border:1px solid #d9d9d1;
            }
            .product_wrap a .texta{
                width: 100%;
                height:15% ;
                left: 0; top: 85%;
                position: absolute;
               
               
            }
            .product_wrap a .imga img{ width: 100%; height: 100%; display: block; }
            .product_wrap a .imga{
                width: 100%;
                height:85% ;
                position: absolute;
                box-sizing: border-box;
                border:1px solid #d9d9d1;
            }

            .pic_wraps{
            width: 96%;
            margin:0 auto;
        }
        .pic_wraps a{ 
        width: 100%;
        
        display: none;
         }
         .pic_wraps a:nth-child(1){ 
        width: 100%;
        
        display: block;
         }
        .pic_wraps a img{
            width: 100%;
            display: block;
        }

        .news_wrap{
                width: 96%;
                margin: 0 auto;
                margin-top: 10px;
                margin-bottom: 20px;
            }
            .news_ul li{ height: 30px; line-height: 30px;
                border-bottom:1px dashed #ddd;
             }
             .news_ul li a{
                color: #757575; font-size: 13px;
             }


             #add_more{ width: 200px; height: 40px; background: #0077cb;
line-height: 40px; text-align: center; font-size: 14px;border-radius: 50px;
text-align: center;
margin:10px auto;
color: #fff;
              }



              .left_sort_wrap{ width: 28px; height: 28px; border-radius: 36px;
background: rgba(217,1,1,0.8);
position: fixed;
top: 200px;
left: -44px;
z-index: 999;
color: #fff;
font-size: 14px;
line-height: 14px;
text-align: center;
padding: 8px;
transition: all ease-in-out 0.5s;
display: none;
 }

 .sort_left{
    width: 200px;
    position: fixed;
    left: -300px;

    background: #0077cb;
    transition: all ease-in-out 0.4s;
    height: 400px;
    top: 300px;
    border-radius: 20px;
    z-index: 1003;
    padding-top: 20px;
    padding-bottom: 20px;

 }

.sort_close{
    width: 36px;
    height: 36px;
    background: #fff;
    color: #666;
    font-size: 16px;
    text-align: center;
    line-height: 36px;
    position: absolute;
    top: -18px;
    right: -18px;
    border-radius: 36px;
}


 .sort_left a{
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    
    color: #fff;
    display: block;
    
 }

 .first_class:before{
content: "+";
padding-left: 20px;
 }
 .second_class:before{
content: "-";
padding-left: 30px;
 }

    .sort_layer_bg{
        width: 100%; height: 100%;
        background: #000;
       top: 0;
       left: 0;
       z-index: 1002;
        position: fixed;
        opacity: 0;
        display: none;
    }