@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; }
    .title_wraps{ height: 40px; padding:0.2rem; padding-bottom: 0; }
    .title_wraps span{ width: 50%; height: 40px;    background: #343947;
        float: left;line-height: 40px; font-size: 14px; color: #fff;
        text-align: center;
}

.header {
    padding: 0.1rem 0.2rem;
    height: 0.86rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.logo-box {
    width: 2.46rem;
    height: 0.86rem;
    display: block;
}

.nav{ box-sizing: border-box; }
.nav li { float:left; width:25%;}
.nav li a{ background:#343947 ; color:#fff; border:1px solid #fff; border-bottom:0; border-right:0; display:block; text-align:center; padding:10% 0;}
.nav li:nth-child(1) a { border-left:0;}
.nav li:nth-child(5) a { border-left:0;}
.nav li a:hover{ background:#195f99; color:#fff;}

.title_wraps span.selected{ background: #195f99; }

.news_con{ padding: 0.2rem; }
.news_con img{ width: 100%; display: block; }

.news_con1{ display: none; }

.news_con1 img{ width: 100%; display: block;  }

.cnews_ul li{ height: 30px; line-height: 30px; border-bottom:1px solid #f0f0f0;  }

.cnews_ul li a{ font-size: 13px; color:#666; }

.textEllipsis {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
}
.weixin {
    padding: 0.3rem 0;
    margin-top: 0.3rem;
    text-align: center;
    color: #555;
    height: 0.5rem;
    line-height: 0.5rem;
    border-top: 1px dashed #eaeaea;
    font-size: 14px;
}
.zhongmei_wrap{
    padding: 0.2rem;
}


.contact_text{
  line-height: 24px;
  font-size: 14px;
  color: #555;
}
.contact_text p a{ color: #555; font-size: 14px;}
.contact_text p a:hover{ color: #f00; text-decoration: underline; }
.contact_titles{ padding-top: 20px; height: 40px; line-height: 40px; color: #f00; font-size: 18px; }
.zhongmei_class{
height: 0.4rem;
line-height: 0.4rem;

min-height: 40px;
border-bottom: 6px solid #e6e6e6;
position: relative;
display: flex;

    justify-content: space-between;
    align-items: center;
   
    padding-left:0.1rem;
}
.zhongmei_class h2{
    font-size:18px;
   
    height: 0.4rem;
    width:5.49rem;
   
}

.menu-btn-box2 .menu-btn2 {
    display: block;
    width: 0.41rem;
    height: 0.26rem;
    background: url(../images/menu2.png) no-repeat;
    background-size: cover;
    cursor: pointer;
}
.menu-btn-box2{

}
.menu-btn-box2 .item-box2 {
    position: absolute;
    top: 0.8rem;
   
    right: 0;
    max-width: 640px;
    z-index: 999;
    width: 60%;
    background-color: #015AAA;
    padding: 0.1rem 0.2rem 0.2rem;
    display: none;
}
.menu-btn-box2 .item-box2 li {
    padding: 0.1rem 0;
    border-bottom: 1px solid #ffffff;
}
.menu-btn-box2 .item-box2 li a {
    color: #ffffff;
    display: block;
}

.inner_content{ padding: 0.2rem; min-height: 400px;font-size: 14px;}


.pic_ul li{ margin-bottom: 10px;  display: block; width: 100%; display: flex; flex-direction:column;

 align-content: center ;
 }
 .img_wraps{
    display: flex;
            align-items:center;
 }

.img_wraps img{  width:100%; height: 100%; display: block; }


.text_wraps {
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    min-height: 40px;
    font-size: 13px;
    color: #fff;
    text-align: center;
    background: #004D95;
    display: flex;
            align-items:center;
            justify-content: center; /* 水平居中 */

}


.bottom_gaps{ height: 0.78rem; }

.bottom_contact{ z-index:2;height: 0.78rem; background: #343947; position: fixed;bottom:0; left: 0; width: 100%; }


.bottom_contact a{
    height: 0.78rem;
    text-align: center;
    display: block;
    position: relative;
    line-height: 0.78rem;
    overflow:hidden;
    float: left;

}

.bottom_contact a i{
    display: inline-block;
    vertical-align: middle;
    width: 0.26rem;
    height: 0.26rem;
}
.bottom_contact a span{
    display: inline-block;
    vertical-align: middle;
}

.bottom_contact a:nth-child(1){
    width: 33%;
    color: #fff;
    background: url("../images/line_bg.png") right no-repeat;
}
.bottom_contact a:nth-child(2){
    width: 34%;
    color: #fff;
    background: url("../images/line_bg.png") right no-repeat;
}
.bottom_contact a:nth-child(3){
    width: 33%;
    color: #fff;

}
.i1{
    
    background: url(../images/g_1.png) no-repeat center center/cover;
    
    margin-right: 4px;
}
.i2{
    
    background: url(../images/g_2.png) no-repeat center center/cover;
    
    margin-right: 4px;
}
.i3{
    
    background: url(../images/g_3.png) no-repeat center center/cover;
    
    margin-right: 4px;
}

 .index-banner {
    margin: 0 auto;
    max-width: 640px;
}
img {
    border: 0;
    vertical-align: middle;
    width: 100%;
    height: auto;
    display: block;
}

.cp_bt {
    color: #343947;
    font-size: 24px;
    width: 100%;
    text-align: center;
    padding: 0.2rem 0;
    text-align: center;
    border-bottom: 1px solid #dddddd;
    font-weight: bold;
}

.sort_wrap{
    padding: 0.2rem; 
}
.sort_wrap a{ display: block; position: relative;
width: 2.9rem;
height: 3.2rem;

margin-bottom: 0.2rem;
float: left;

  }


.sort_wrap a:nth-of-type(2n){
    float: right;
}
.sort_wrap a img{ width: 100%; height: 100%; position: absolute;
left: 0; top: 0; z-index: 1; display: block;

 }


.sort_wrap a:nth-of-type(1){  width: 6rem; height: 3rem; }
.sort_wrap a:nth-of-type(1)  .sort_text{  height:1rem;  line-height: 1rem; top:1rem;}


.mask{ background: rgba(0,0,0,0.5); width: 100%; height: 100%; position: absolute; left: 0; top: 0;
z-index: 2; }


.sort_text{ position: absolute; z-index: 3; width: 100%; left: 0; top: 1.1rem; height: 1rem;
 line-height:1rem; text-align: center;
}
.sort_text span{ font-size: 14px; color: #fff; }
.sort_text b{ font-size: 14px; color: #fff; font-weight: normal;  padding-left: 10px; padding-right: 10px;}

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

    z-index: 1; }
.about_wraps{ padding: 0.2rem; line-height: 24px; color: #555; }

.about_wraps img{ width: 100%; display: block; }

.about_wraps p{  text-indent: 28px; }
.abo_ck a {
    width: 2rem;
    padding: 2% 0;
    display: block;
    color: #fff;
    background: #343947;
    text-align: center;
    margin: 0 auto;
    border-radius: 200px;
}

img {
    border: 0;
    vertical-align: middle;
    width: 100%;
    height: auto;
}

.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%; }


#back-to-top{position:fixed;bottom:0.8rem;right:0; z-index:6666668;}
#back-to-top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;width:50px;
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/-moz-transition:color 1s; -webkit-transition:color 1s;-o-transition:color 1s;}
#back-to-top a:hover{color:#979797;}
#back-to-top a span{ margin-left:5px;background:#d1d1d1;border-radius:6px;display:block;height:40px;width:40px;
background:#d1d1d1 url(../images/arrow-up.png) no-repeat center center; background-size:50%;
margin-bottom:5px;-moz-transition:background 1s;-webkit-transition:background 1s;-o-transition:background 1s;}
#back-to-top a:hover span{background:#979797 url(../images/arrow-up.png) no-repeat center center;background-size:55%;}






.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{
                
                padding-left: 0.2rem;
                padding-right: 0.2rem;
                margin:0 auto;
            }
            .product_wrap a{
                width: 49%;
                padding-top: 45%;
                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:80% ;
                position: absolute;
                left: 0;
                top: 0;
                box-sizing: border-box;
                border:1px solid #d9d9d1;
            }
            .product_wrap a .texta{
                width: 100%;
                height:20% ;
                left: 0; top: 80%;
                position: absolute;
               
               
            }
            .product_wrap a .imga img{ width: 100%; height: 100%; display: block; }
            .product_wrap a .imga{
                width: 100%;
                height:80% ;
                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{
                padding: 0.2rem;
                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: #343947;
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;
    }