@charset "utf-8";

/* CSS Document */




/* banner */

.banner { position:relative; width:100%;min-width:1200px; height:auto; overflow: hidden; }
.banner em { background:url(../images/shadow.png) repeat-x; height:8px; width:100%; position:absolute; top:0; left:0; z-index:1;}
.banner .bd,.banner .bd li { width:100%; height:auto; overflow: hidden; }
.banner .bd img{width:100%}
.banner .hd ul{ list-style: none; }
.banner .hd ul li{ list-style: none; }
.banner .bd li .maintitle{width: 1200px; height:auto; position: absolute; top:100px; margin-left: 9%; z-index: 9 }
.banner .bd li .maincont{ width: 734px; height: 325px; margin:80px auto;  background:rgba(0,0,0,0.3); padding-top:50px; }
.banner .bd li .maincont .t1{font-size: 32px;color: rgb(255, 255, 255); display: block;  text-align: center; }
.banner .bd li .maincont .t2{font-size:100px; color: rgb(255, 255, 255);display: block;  text-align: center;font-weight:700;}
.banner .bd li .maincont .t3{ margin-top:15px;font-size: 30px;color: rgb(255, 255, 255); display: block;  text-align: center; }
.banner .bd li .maincont .t4{font-size: 30px;color: rgb(255, 255, 255); display: block;  text-align: center; }

.banner .hd li {
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    margin: 0 5px;
    cursor: pointer;
    background: #fff;
    opacity: 0.8;

    }

.banner .hd li.on{
    background: #5baafb;
    }

.banner  .banner_head {
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 36px;
    width: 528;
    text-align: center;
    margin-left: -264px;
}


.banner  .banner_head a {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    text-align: center;
    width: 190px;
  
    height: 35px;
    line-height: 35px;
    overflow: hidden;
}

.banner  .banner_head li
{
float:left;
 width: 130px;
  height: 18px;
   background-color: rgba(153,153,153,.6);
}

.banner .banner_head li:hover {
    background-color: rgba(0,0,0,.6);
    text-decoration: none;
}

.banner .banner_head li.on {
    background-color: rgba(0,0,0,.6);
    text-decoration: none;
}

.banner .hd {
    height: 35px;
    overflow: hidden;
    margin:0px auto;
    margin-top: -40px;
    z-index: 1;
    width: 100px
}

.banner .next{
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: block;
    width: 32px;
    height: 40px;
    background: url(../img/right.png) center center no-repeat;
    filter: alpha(opacity=50);
    opacity: 0.5;
    left: auto;
    right: 3%;
    
}
.banner .prev{
    position: absolute;
    left: 3%;
    top: 50%;
    display: block;
    width: 32px;
    height: 40px;
    background: url(../img/left.png) center center no-repeat;
    filter: alpha(opacity=50);
    opacity: 0.5;

}
/*  */
.wrap1{ height: 443px; width: 100%; padding-top: 101px; padding-bottom: 101px;}
.cont1{ height: 443px; background: #fff;  }
.cont1 span.title1{font-size: 24px; color: #333;display: block; text-align: center; line-height: 32px}
.cont1 span.title2{ font-size: 14px; color: #aaa; display: block; text-align: center;line-height: 32px} 
.cont1 li{ width: 194px; height: 443px; text-align: center;  position: relative; float: left; margin-left: 50px; margin-right: 50px; }
.cont1 li .sz2{width: 30px; line-height: 25px; text-align: center; font-size: 16px; color: #666;display: block; height: 120px;}
.cont1 li .sz1{width: 46px; height: 46px;margin:10px auto; background: #02b2b5; color: #fff; display: block; border-radius: 23px 23px; text-align: center; line-height: 46px;}
.cont1 li .sz3{width: 100%; margin-top: 15px; line-height: 25px; text-align: center; font-size: 16px; color: #666;  height:2em;display: none;}
.wrap2{height:616px; padding-top: 75px; background: url(../img/back2.jpg) center center no-repeat;}
.cont2{}
.cont2 span.title1{font-size: 20px; color: rgb(3, 178, 181);display: block; text-align: center; line-height: 32px}
.cont2 span.title2{ font-size: 15px; color: rgb(3, 178, 181); display: block; text-align: center;line-height: 32px}
.cont2 .prodlist{clear: both; width: 1150px; height: 490px; margin-top: 15px;}
.cont2 .prodlist li{ display: block; width: 325px; height: 395px; overflow:hidden; float: left;  margin-left: 22px; margin-top:22px; }
.cont2 .prodlist li img{width: 325px; height: 395px;margin-left: 0px;  transition: all 0.5s;}
.cont2 .prodlist li:hover img{ margin-left: -10px }
.prodlist2 .next{
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: block;
    width: 32px;
    height: 40px;
    background: url(../img/right.png) center center no-repeat;
    filter: alpha(opacity=50);
    opacity: 0.5;
    left: auto;
    right: 3%;
    
}
.prodlist2 .prev{
    position: absolute;
    left: 3%;
    top: 50%;
    display: block;
    width: 32px;
    height: 40px;
    background: url(../img/left.png) center center no-repeat;
    filter: alpha(opacity=50);
    opacity: 0.5;

}


.cont2 .prodlist2{clear: both; display: none; width: 1150px; height: 490px; margin-top: 15px;}
.cont2 .prodlist2 li{ display: block; width:100% ; height: 395px; overflow:hidden; float: left;   margin-top:22px; }
.cont2 .prodlist2 li img{width: 325px; height: 395px;margin-left: 0px;  transition: all 0.5s;}
.cont2 .prodlist2 li:hover img{ margin-left: -10px }

.cont2 .more{ width: 100%; text-align: center; clear: both; height: 50px; margin-top:40px; }
.cont2 .more a{ border: 1px solid #d2d2d2; font-size: 18px; padding:10px 40px; color: #666; }

.prodtitle{  padding-right: 45px; padding-top: 75px; width:1100px }
.prodtitle .title1{float:left;width: 320px;}
.prodtitle .title1 .span1{font-size: 38px; color: rgb(51, 51, 51); font-family: 华文宋体; display: block; line-height: 45px;text-align: center; font-weight: 600}
.prodtitle .title1 .span2{font-family: 微软雅黑; font-size: 16px; color: rgb(102, 102, 102);display: block; text-align: center;}
.prodtitle .title2{display: block;width: 160px; height: 140px; float: right;}

.prodlist{ height: 750px; margin-top: 25px; }
.prodlist .prodleft{width: 326px; height: 727px; float: left;text-align: center; margin-top: 8px;}
.prodlist .prodright{width: 810px; height: 727px; float: right;}
.prodlist .prodleft img{max-width: 96%; text-align: center;}
.prodlist .prod1{width: 380px; height: 380px; float: left; margin-right: 21px;}
.prodlist .prod1 img{width: 380px; height: 380px;}
.prodlist .prod2{width: 259px; height: 309px; float: left; margin-right: 3px; margin-top: 10px;}
.prodlist .prod2 img{width: 259px; height: 309px;}
.prodlist .prod1 span,.prodlist .prod2 span{ display: block; width: 100%; height: 30px; line-height: 30px; background: #000; color: #fff; opacity: 0; }

.wrap3{ height: 627px; width: 100%;  margin:0px auto;  background: #fff}
.wrap3 .cont3{ width: 50%; float: left; text-align: right; }
.wrap3 .cont4{ width: 50%; float: right; }
.wrap3 .cont4 .title{display: block; text-align: center; padding-top:100px;  font-size: 24px; color: #333;}
.wrap3 .cont4 .detail{display: block; text-align: center; font-size: 15px; line-height: 48px; color: #666}
.wrap3 .cont4 .more{ display: block;  width: 100%; text-align: center; margin-top: 15px; }
.cont4 .more a{ border: 1px solid #d2d2d2; font-size: 16px; padding:10px 40px; color: #666; }

.wrap4{ height: 585px; padding-bottom: 85px; padding-top: 85px; width: 100%; background:#f3f3f3  }
.cont5{ clear: both; }
.cont5 li{ width: 326px; height: 581px; background: #fff; display: block; float: left; margin-left:50px  }
.cont5 li .img{width: 322px; height: 380px;}
.cont5 li .img img{width: 322px; height: 380px;}
.cont5 li .txt{ height: 160px; padding-bottom: 20px; padding-top: 10px }
.cont5 li .txt1{ font-size: 20px; color: #000; padding-right: 20px; display: block; text-align: right; }
.cont5 li .txt2{font-size: 14px; color: #666; padding-left: 20px;display: block; }

.wrap5{ height: 458px;   padding-top: 50px; width: 100%; background:url(../img/21.png) bottom no-repeat;  }
.wrap5 span.title1{font-size: 24px; color: #333;display: block; text-align: center; line-height: 32px}
.wrap5 span.title2{ font-size: 14px; color: #aaa; display: block; text-align: center;line-height: 32px}
.wrap5 .newslist{ clear: both;  margin-top:30px;}
.wrap5 .newslist li {width: 500px; height: 150px; font-size: 16px; display: block; float: left;margin-left:45px;}
.wrap5 .newslist .time1{font-size: 16px;line-height: 25px;color: #4a4a4a;font-family: arial;}
.wrap5 .newslist .time2{ font-size: 14px;line-height: 12px; color: #767676;font-family: arial; text-align: center;}
.wrap5 .newslist .newstitle{color: #3d3d3d;}
.wrap5 .newslist .newsdescript{color: #999999; line-height: 20px; font-size: 12px; margin-bottom: 15px}










@media screen and (max-width: 1200px) and (min-width: 1024px){
    .banner { width:100%;min-width:1024px; }
    .banner .bd li .maintitle{width: 1000px;top:50px; margin-left:2%; }
    .cont1{ width: 47%; float: left;margin-left: 1%;  }
    .cont2{ width: 49%; float: left; margin-left: 3%;  }
    .cont3{ width: 98%; margin:0px auto; clear: both; }
    }

@media screen and (max-width:1024px) and (min-width: 768px){ 
    .banner { width:100%;min-width:768px; }
    .banner .bd li .maintitle{width: 650px;top:-15px; margin-left:3.5%; }
    .cont1{ width: 47%; float: left;margin-left: 1%;}
    .cont2{ width: 49%; float: left; margin-left: 3%;}
    .cont3{ width: 98%; margin:0px auto; clear: both; }
    .cont1 .lst1 .imglst{ width: 45%; height: 140px; margin-left: 5px; margin-right: 5px;  margin-bottom: 20px; float: left; }
}

@media screen and (max-width: 768px) and (min-width: 480px){ 
    .banner { width:100%;min-width:480px; height: 240px;  }
    .banner .bd li .maintitle{width: 100%; top:0px; margin-top: -200px; position: relative; margin-left:0px; text-align: center;  }
    .banner .bd li img{ height: 240px }
    .banner .bd li .maincont{width: 100%; height: 240px; position: relative; top:10px; text-align: center;margin:0px auto; background: none; }
    .banner .hd{display: none;}
    .cont1{ width: 99%;margin-left: 1%;   }
    .cont2{ width: 99%;margin-left: 1%;}
    .cont3{ width: 98%; margin:0px auto; clear: both; }
    .cont1 .lst1 .imglst{ width: 45%; height:auto; margin-left: 5px; margin-right: 5px;  margin-bottom: 20px; float: left; }
    .banner .bd li .maincont .t1{font-size: 16px;color: rgb(255, 255, 255); display: block;  text-align:center;margin-left: 0px }
    .banner .bd li .maincont .t2{font-size: 30px; color: rgb(255, 255, 255);display: block; text-align:center; font-weight:700;margin-left: 0px}
    .banner .bd li .maincont .t3{color: #5baafb;}
    .banner .bd li .maincont .t4{font-size: 16px; color: #fff;  font-style:italic; display: block; text-align:center; margin-left: 0px}
    .banner .next{ display: none; }
    .banner .prev{ display: none; }
    .wrap1{ height: 500px; width: 100%; padding-top: 0px; padding-bottom: 101px;}
    .cont1 li{width: 49%; text-align: center;margin:0px; height: 280px}
    .cont1 li img{width: 98%}
    .cont1 li .sz1{display: none;}
    .cont1 li .sz2{display: none;}
    .cont1 li .sz3{display: block;}
    .prodlist{width: 100%}

}

@media screen and (max-width: 480px){ 
    body{background: #fff;}
    .banner { width:100%;min-width:100%; background: #fff; width: 100%; height: 200px; padding-top: 3.5em;  }
    .banner .bd li .maintitle{width: 100%; top:0px; margin-top: -200px; position: relative; margin-left:0px; text-align: center;  }
    .banner .bd li img{ height: 170px;width: 130%;margin-left: -12%; }
    .banner .bd li .maincont{width: 100%; height: 240px; position: relative; top:10px; text-align: center;margin:0px auto; background: none; }
    .banner .hd{display: none;}
    .cont1{ width: 99%;margin-left: 1%;background: #fff;}
    .cont2{ width: 99%;margin-left: 1%;background: #fff;}
    .cont3{ width: 98%; margin:0px auto; clear: both;background: #fff; }
    .cont1 .lst1 .imglst{ width: 45%; height: auto; margin-left: 5px; margin-right: 5px;  margin-bottom: 20px; float: left; }
    .banner .bd li .maincont .t1{font-size: 16px;color: rgb(255, 255, 255); display: block;  text-align:center;margin-left: 0px }
    .banner .bd li .maincont .t2{font-size: 30px; color: rgb(255, 255, 255);display: block; text-align:center; font-weight:700;margin-left: 0px}
    .banner .bd li .maincont .t3{color: #5baafb;}
    .banner .bd li .maincont .t4{font-size: 16px; color: #fff;  font-style:italic; display: block; text-align:center; margin-left: 0px}
    .banner .next{ display: none; }
    .banner .prev{ display: none; }
    .wrap1{ height: 500px; width: 100%; padding-top: 0px; padding-bottom: 101px;}
    .cont1 li{width: 48%; text-align: center;margin:0px 1%; height: 280px}
    .cont1 li img{width: 98%}
    .cont1 li .sz1{display: none;}
    .cont1 li .sz2{display: none;}
    .cont1 li .sz3{display: block;}
    .cont2 .prodlist2{width: 100%; display: block;}
    .cont2  .prodlist{display: none;}
    .prodtitle{ padding-left: 5px; padding-top:50px; width:98%}
    .prodtitle .title1{float:left;width: 320px;}
    .prodtitle .title1 .span1{font-size: 38px; color: rgb(51, 51, 51); font-family: 华文宋体; display: block; line-height: 45px;text-align: center;}
    .prodtitle .title1 .span2{font-family: 微软雅黑; font-size: 16px; color: rgb(102, 102, 102);display: block; text-align: center;}
    .prodtitle .title2{display: block;width: 100%; text-align: center;margin-top: 8px; height: 100px; float: left;}
    .prodlist .prodleft {display: none;}
    .prodlist .prodright{width: 100%;height: auto;}
    .prodlist{ height: 25em; }
    .prodlist .prod1 {
    width: 49%;
    height: auto;
    float: left;
    margin-right:1%;
        }
    .prodlist .prod1 img {
    width: 100%;
    height: 137.44px;
        }
    .prodlist .prod2 {
    width: 32%;
    height: auto;
    float: left;
    margin-right:1.3%;
        }
    .prodlist .prod2 img {
    width: 100%;
    height: auto;
        }
   .prodlist .prod1 span, .prodlist .prod2 span {display: none;}
}
