.bn{position: relative;}
.bn img{max-width: 100%;}
.bn .main{position: absolute;top: 45%;left: 22%;transform: translate(-50%,-50%);}
.bn .main p{color:#333333;}
.bn .cnTitle{margin-bottom: 15px; font-size: 30px;}
.bn .enTitle{font-size: 20px;}

.navBar{position: relative; height: 50px;background-color: #f9f9f9;border-bottom:1px solid #ededed;text-align: center;}
.navBar > .putNav{display:-webkit-box;padding-bottom: 1px; overflow-x: auto;overflow-y:hidden; -webkit-overflow-scrolling:touch;}
.navBar > .putNav::-webkit-scrollbar{display: block; width: 4px;height: 4px; background-color: #eee;}
.navBar > .putNav::-webkit-scrollbar-thumb{border-radius: 10px;background-color: #666;}
.navBar ul{display: flex; height: 100%;flex-wrap: nowrap;margin: 0 auto; justify-content: center;}

.navBar li{display: inline-block;height: 100%;padding:0 40px;}
.navBar li a{position: relative; display: block;line-height: 50px; padding: 0 5px;white-space: nowrap; color:#282828; transition: all .6s;}
.navBar li.on a,.navBar li:hover a{color: var(--themaGreen);}
.navBar li.on a:after,.navBar li:hover a:after{
  content:"";
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -1px;
  left: 0;
  background-color: var(--themaGreen);
}

.navBar .toMore{position: absolute;width: 120px;height: calc(100% - 1px);top: 0;right: 0;
  background-color: rgb(249, 249, 249);box-shadow: -4px 0px 0 0 rgba(244, 245, 246, 0.3);}
.navBar .toMore .list_shadow{position: relative;height: 100%;width: 0;}

.main{max-width: 1200px;margin: 0 auto;}

.abouts{padding:60px 0; font-size: 14px; color:#282828;}
.abouts p{line-height: 24px;}
.abouts img{max-width: 100%;margin: 10px auto;}
.abouts img:first-child{margin-top: 40px;}

.news{padding-top: 80px;}
.news li{position: relative;height: 200px; margin-bottom: 70px; font-size: 0;}
.news li a{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index:5;}
.news li > div{display: inline-block;vertical-align: top;}
.news li .leftPic{width: 100%; max-width: 300px;max-height: 200px;overflow: hidden;}
.news li .leftPic img{max-width: 100%;transition: all .5s;}
.news li .rightTxt{width: 100%;height: 100%; max-width: 830px;margin-left: 70px;border-bottom:1px solid #eeeeee;}
.news li .rightTxt h4{line-height: 26px; font-size: 16px;color:#282828;}
.news li .rightTxt h6{line-height: 30px; font-size: 12px;color:#999999;}
.news li .rightTxt p{margin-top: 20px;line-height: 24px; font-size: 14px;color:#666666;}
.news li:hover .leftPic img{transform: scale(1.1);}
.news li:hover .rightTxt *{color:var(--themaGreen);}

.product{width: 100%;padding: 80px;box-sizing: border-box;}
.product .leftNav{display: inline-block; width: 270px;}
.product .leftNav .headTitle{height: 120px;}
.product .leftNav .headTitle p:nth-child(1){line-height: 40px; font-size: 16px;color:#666666;}
.product .leftNav .headTitle p:nth-child(2){line-height: 38px; font-size: 20px;color:var(--themaGreen);}
.product .leftNav .chooseTitle{display: none; position: relative;cursor: pointer;}
.product .leftNav .chooseTitle:after{
  content:"";
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  right: 20px;
  border-top:2px solid white;
  border-right:2px solid white;
  transform: translate(-50%,-50%) rotate(135deg);
}
.product .leftNav li{margin-bottom: 10px;}
.product .leftNav a{position: relative; display: block;line-height: 50px;padding-left: 40px; color:#282828;background-color: #f2f2f2;transition: all .4s;}
.product .leftNav a:after{
  content:"";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  top: 50%;
  right: 20px;
  border:5px solid transparent;
  border-left-color:var(--themaGreen);
  transform: translateY(-50%);
}
.product .leftNav li:hover a,.product .leftNav li.on a{background-color: var(--themaGreen);color:white;}
.product .leftNav li:hover a:after{border-left-color:white ;}

.product .rightPro{float: right;max-width: 1400px;overflow: hidden;}
.product .rightPro ul{margin-bottom: 40px; font-size: 0;}
.product .rightPro li{position: relative; display: inline-block; margin-right: 25px;margin-bottom: 30px; width: 330px;height: 360px;
  border:1px solid #eeeeee;box-sizing: border-box;transition: all .4s;}
.product .rightPro li a{display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index:5;}
.product .rightPro li:hover{border-color:var(--themaGreen);}
.product .rightPro li:nth-child(4n){margin-right: 0;}
.product .rightPro p{position: relative;top: 15%; font-size: 14px;color:#282828;text-align: center;}
.product .rightPro .putPic{position: relative;top: 40%;left: 50%;transform: translate(-50%,-50%);}
.product .rightPro .putPic img{ max-width: 240px;width: 100%;margin: 0 auto;}

.showBigPic{position: fixed;width: 0px;height: 100%; left: 50%;top: 50%;bottom: 0;right: 0;transform: translate(-50%,-50%);
   background-color: rgba(0,0,0,.9);z-index:10;overflow: hidden;transition: all .5s ease-in-out;}
.showBigPic .main{position: relative;max-width: 650px;width: 100%;top: 20%;margin: 0 auto;}
.showBigPic .putPic{padding: 50px 90px; background-color: white;border-radius:5px;overflow: hidden;transition:all .5s;}
.showBigPic .putPic img{width: 100%; max-width: 700px;transition:all .5s;}
.showBigPic div{margin-top: 10px;}
.showBigPic p{float: left; color: #cccccc;cursor:default;}
.showBigPic div i{float: right;}
.showBigPic .clearfix img{max-width: 26px;cursor:pointer;}

.applica{padding: 60px 0;}
.applica img{max-width: 100%;}

.contact{padding: 60px 0; color:#282828;}
.contact h3{margin-bottom: 5px; font-size: 18px;}
.contact p{font-size: 14px;line-height: 30px;}
.contact .putMap{margin-top: 40px;}
.contact #container{height: 450px;}

.pages{text-align: center;}
.pages a{display: inline-block;margin: 0 10px; padding: 0 15px; height: 38px;line-height: 38px;color:#282828; text-align: center;border-radius:5px; border:1px solid rgba(0,0,0,.3);transition:all .5s;}
.pages a.current,.pages a:hover{background-color: var(--themaGreen);border-color:var(--themaGreen);color:white;}

@media all and (max-width:1850px){
  .product .rightPro{width:calc(100% - 290px);}
  .product .rightPro li{width:calc(25% - 25px);}
}
@media all and (max-width:1400px){
  .product .rightPro li:nth-child(4n){margin-right: 25px;}
  .product .rightPro li{width:calc(33% - 25px);}
  .product .rightPro li:nth-child(3n){margin-right: 0px;}
}

@media all and (max-width:1200px){
  
  .navBar li{margin:0;padding: 0 20px;}
  .navBar li a{white-space: nowrap;}

  .abouts{padding:20px;}

  .product{padding: 30px;}
  
  .news{padding: 20px;}
  .news li .leftPic{width: 33%;}
  .news li .rightTxt{width: 65%;max-width: initial; margin-left: 2%;}

  .contact{padding: 30px;}
  .contact #container{height: 350px;}
}
@media all and (max-width:1000px){
  .bn .enTitle{display: none;}

  .product .leftNav .headTitle{display: none;}
  .product .leftNav{display: block;width: 100%;}
  .product .leftNav .chooseTitle{display: block;height: 40px;line-height: 40px;background-color: var(--themaGreen);color:white;text-align: center;}
  .product .leftNav ul{height: 0;overflow: hidden;transition: all .5s;}
  .product .leftNav li{margin-bottom: 0;}
  .product .rightPro{float: none;margin: 0 auto;}
  
  .product .rightPro{width: 100%;margin-top: 15px;}
  .product .rightPro li{width:calc(25% - 19px);}
  .product .rightPro li:nth-child(3n){margin-right: 25px;}
  .product .rightPro li:nth-child(4n){margin-right: 0;}
}

@media all and (max-width:840px){
  .news li{height: initial; margin-bottom: 20px; padding-bottom: 10px; border-bottom:1px solid #eeeeee;}
  .news li > div{vertical-align: middle;}
  .news li .rightTxt{height: initial; border-bottom:0;}
  .news li .rightTxt p{display: none;}


  .product .rightPro li{width:calc(33% - 19px);margin-right: 30px;}
  .product .rightPro li:nth-child(4n){margin-right: 30px;}
  .product .rightPro li:nth-child(3n){margin-right:0;}  

  .showBigPic .main{padding:0 20px;box-sizing: border-box;}
}
@media all and (max-width:648px){
  .product .rightPro .putPic{top: 42%;}
  .product .rightPro p{top: 20%;margin-top: 10px;}
  .product .rightPro li{width:47.5%;height: 300px; margin-right: 5%;}
  .product .rightPro li:nth-child(3n){margin-right: 5%;}
  .product .rightPro li:nth-child(2n){margin-right:0;}  
}